简单的 Javascript/HTML 乘法计算器不起作用
[英]Simple Javascript/HTML Multiplcation calculator not working
问题描述
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.我是 javascript 新手，我觉得答案很简单，但我看不到。 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 个解决方案
解决方案1
0 已采纳 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.您还可以通过从逻辑中添加点击处理程序而不是在标记中使用onClick来更有效地将逻辑 (JavaScript) 与标记 (HTML) 分开。 Move the JavaScript code to the end of the page as well, so the operation of adding the click handler finds the element.将 JavaScript 代码也移动到页面末尾，因此添加点击处理程序的操作会找到该元素。 (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>
解决方案2
0 2022-05-20 18:23:21
place an id on your calculate button and add this eventListener:在您的计算按钮上放置一个 id 并添加此事件监听器：
document.getElementById("calc").addEventListener("click", multiplyBy); 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.