I want to create a form to ask passengers in an airport their first name, sur name, their weight and their cargo weight. Then by pressing the submit button display the information in a line with the total of passengers weight and cargo weight. the the cycle goes on till we enter the last passenger information .At the end, I want to display the sum of total weights in order to keep track of the weight plane would carry. this was the scenario, I created form, but I cannot figure out how to solve it with primary knowledge in JavaScript. I gave the submit button a onclick function, then define the function as below:
<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>
I know I am way behind the termination of my problem, but I need some clues to make it happen. I really appreciate if anyone would help me. in addition, JavaScript "+" sign cause a big trouble to me, since I cannot use it as an operator.
So, there are a few ways of doing this. One is to define the onClick inline in the HTML:
<script>
function a() { return b; }
</script>
<body>
<button onClick="a()">Call A</button>
</body>
The other way is to use an event listener:
<button id="btn">Call function</button>
<script>
const btn = document.getElementById("btn")
btn.addEventListener("click", event => {
// Do something
return something;
})
</script>