简单 Javascript/HTML 乘法计算器不工作

Question

我正在尝试让这个计算器在我的网站上运行。但是在我在字段中输入数字并点击计算按钮后，答案并没有出现。我是 javascript 的新手，我觉得答案很简单，但我没有看到。请帮助

<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>

Answer 1

您实际上从未调用过该函数。将它作为单击处理程序添加到按钮。（并删除表格，因为您实际上不想 post 这里的表格。）

例如：

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>

您还可以更有效地将逻辑 (JavaScript) 与标记 (HTML) 分开，方法是从逻辑中添加点击处理程序，而不是在标记中使用 onClick。将 JavaScript 代码也移动到页面的末尾，因此添加点击处理程序的操作会找到该元素。（它不会在页面顶部找到它，因为当该代码执行时它还不存在。）

例如：

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>

Answer 2

在您的计算按钮上放置一个 id 并添加此 eventListener：

document.getElementById("calc").addEventListener("点击", 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>

简单 Javascript/HTML 乘法计算器不工作

Simple Javascript/HTML Multiplcation calculator not working

javascript

html

web

calculator

multiplication