无法将文本输入字段的值分配给 Javascript 变量 [重复]

Question

每次调用

malfun

函数时，它都会显示

0

而不是两个数字的乘积，我不确定为什么。但是，当我将一个值硬编码为

num1

和

num2

时，它会按预期工作。

const num1 = document.getElementById("firstNumber").value;
const num2 = document.getElementById("secondNumber").value;

function mulfun() {
  document.getElementById("result").innerHTML = num1 * num2;
}

<form>
  <input type="text" id="firstNumber" placeholder="Enter the first value"><br>
  <input type="text" id="secondNumber" placeholder="Enter the Second Value"><br>
  <input type="button" id="multiply" value="Multiply" onClick="mulfun()">
</form>
<p>The Result is : <br>
  <span id="result"></span>
</p>

有人可以解释为什么会发生这种情况以及我该如何解决它吗？

Answer 1

问题是您在执行

document.getElementById

之后立即读取输入值一次，而不是在用户单击按钮后立即读取。您应该在调用函数时动态访问该值。 （当你声明这些值时，

num1

和

num2

都是空字符串，在 JS 中是

"" * "" === 0

。）

const num1 = document.getElementById("firstNumber");
const num2 = document.getElementById("secondNumber");

function mulfun() {
  document.getElementById("result").innerHTML = num1.value * num2.value;
}

<form>
  <input type="text" id="firstNumber" placeholder="Enter the first value"><br>
  <input type="text" id="secondNumber" placeholder="Enter the Second Value"><br>
  <input type="button" id="multiply" value="Multiply" onClick="mulfun()">

</form>
<p>The Result is : <br>
  <span id="result"></span>
</p>