Simple Javascript/HTML Multiplcation calculator not working
Question
I'm trying to get this calculator to work on my website. But the answer is not populating after I enter numbers into the fields and hit the Calculate button. I'm new to javascript and I feel like the answer is simple but I don't see it. Please help
<HTML>
<head>
<script language="javascript" type="text/javascript">
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("totalsqft").innerHTML = num1 * num2;
}
</script>
</head>
<body>
<form>
Length (ft): <input id="firstNumber" type="text" />
Width (ft): <input id="secondNumber" type="text" />
<input type="button" value="Calculate" />
</form>
Total Square Feet:
<span id="totalsqft"></span>
</body>
</html>
2 answers
solution1
0 ACCPTED 2022-05-20 18:10:39
You never actually call the function. Add it as a click handler to the button. (And remove the form, since you don't want to actually post a form here.)
For example:
function multiplyBy() { num1 = document.getElementById("firstNumber").value; num2 = document.getElementById("secondNumber").value; document.getElementById("totalsqft").innerHTML = num1 * num2; }
Length (ft): <input id="firstNumber" type="text" /> Width (ft): <input id="secondNumber" type="text" /> <input type="button" value="Calculate" onClick="multiplyBy()" /> Total Square Feet: <span id="totalsqft"></span>
You can also more effectively separate the logic (JavaScript) from the markup (HTML) by adding the click handler from the logic instead of using onClick in the markup. Move the JavaScript code to the end of the page as well, so the operation of adding the click handler finds the element. (At the top of the page it wouldn't find it, since it doesn't exist yet when that code executes.)
For example:
Length (ft): <input id="firstNumber" type="text" /> Width (ft): <input id="secondNumber" type="text" /> <input type="button" value="Calculate" /> Total Square Feet: <span id="totalsqft"></span> <script language="javascript" type="text/javascript"> function multiplyBy() { num1 = document.getElementById("firstNumber").value; num2 = document.getElementById("secondNumber").value; document.getElementById("totalsqft").innerHTML = num1 * num2; } document.querySelector('input[type="button"]').addEventListener('click', multiplyBy); </script>
solution2
0 2022-05-20 18:23:21
place an id on your calculate button and add this eventListener:
document.getElementById("calc").addEventListener("click", multiplyBy);
document.getElementById("calc").addEventListener("click", multiplyBy);
<html> <head> <script language="javascript" type="text/javascript"> function multiplyBy() { num1 = document.getElementById("firstNumber").value; num2 = document.getElementById("secondNumber").value; document.getElementById("totalsqft").innerHTML = num1 * num2; } </script> </head> <body> <form> Length (ft): <input id="firstNumber" type="text" /> Width (ft): <input id="secondNumber" type="text" /> <input id = 'calc' type="button" value="Calculate" /> </form> Total Square Feet: <span id="totalsqft"></span> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.