Quiero crear un formulario para preguntar a los pasajeros en un aeropuerto su nombre, apellido, su peso y el peso de su carga. Luego, al presionar el botón enviar, se muestra la información en una línea con el peso total de los pasajeros y el peso de la carga. el ciclo continúa hasta que ingresamos la información del último pasajero. Al final, quiero mostrar la suma de los pesos totales para realizar un seguimiento del peso que transportaría el avión. este era el escenario, creé el formulario, pero no puedo encontrar la manera de resolverlo con conocimiento primario en JavaScript. Le di al botón Enviar una función onclick, luego definí la función de la siguiente manera:
<form id="Passenger-form" onsubmit="return false"> <!--onsubmit, should I use or not, does it make differnce to displaying form data in the same page??--> <label for="First-name">First name: </label> <input type="text" name="First-name" placeholder="Please insert first name."><br> <label for="Second-name">Second name: </label> <input type="text" name="Second-name" placeholder="Please insert second name"> <br> <label for="Passenger-weight">Passengers weight: </label> <input type="number" name ="Passenger-weight" placeholder="Please enter passengers weight"><br> <label for="cargo-weight">cargo weight: </label> <input type="number" name ="cargo-weight" placeholder="Please enter cargo weight"><br> <input type="submit" name ="submit" onclick="showInput(); multiply(); "> <!-- should I use && or semicolon in here to give two function to one onclick --> </form> <p > <span id="display"></span></p> <body> <script language="JavaScript"> function showInput() { document.getElementById('display').innerHTML = document.getElementById("First-name").value +" "+ document.getElementById("Second-name").value; } function multiply(){ num1 = document.getElementById("Passenger-weight").value; num2 = document.getElementById("cargo-weight").value; document.getElementById("display").innerHTML = num1 + num2; } </script>Sé que estoy muy atrasado en la resolución de mi problema, pero necesito algunas pistas para que esto suceda. Realmente aprecio si alguien me ayudaría. Además, el signo "+" de JavaScript me causa un gran problema, ya que no puedo usarlo como operador.
Entonces, hay algunas maneras de hacer esto. Una es definir onClick en línea en el HTML:
<script> function a() { return b; } </script> <body> <button onClick="a()">Call A</button> </body>La otra forma es usar un detector de eventos:
<button id="btn">Call function</button> <script> const btn = document.getElementById("btn") btn.addEventListener("click", event => { // Do something return something; }) </script>