Javascript page not working

Question

<script>
var drop = document.getElementById("dropfuel").value;
var ifuel = document.getElementById("tfuel").value;
function fuelans(drop,ifuel){
return drop * ifuel;
}
document.getElementById("ans").innerHTML = fuelans;
</script>

<p>
<button onsubmit= "fuelans()">Calculate</button>
</p>

<p id="ans">

Cannot get these to work
There the form is as follows:

Dropdown
Input(input*dropdown value)
Button
Line f/ output(output button click)

Input(input*36/10000)
Button
Line f/ Output(output button clicked)

Answer 1

The issue is with how the button and function are set up. Use onclick instead of onsubmit, and correctly pass values from the dropdown and input fields to the function.

Fixed Code:

<select id="dropfuel">
<option value="36">36</option>
<option value="50">50</option>
<option value="100">100</option>
</select>

<input type="number" id="tfuel">

<button onclick="calculateFuel()">Calculate</button>

<p id="ans">Your result will appear here.</p>

<script>
function calculateFuel() {
var drop = parseFloat(document.getElementById("dropfuel").value);
var ifuel = parseFloat(document.getElementById("tfuel").value);
var result = (drop * ifuel) / 10000;
document.getElementById("ans").innerHTML = "Result: " + result;
}
</script>

Explanation:
• The onclick event triggers the calculateFuel function.
• The result is calculated and displayed in the ans element.