javascript - 关于javascript变量的问题，需要帮助~

Question

我将 5、4 填入第一个数字、第二个数字的空白处，然后在输出中单击“乘法”。我期待得到 20，但我得到了 0，为什么？

这是代码(也是 on JSBin ):

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

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

var divideBy = function() {
  var c = num1 / num2;
  document.getElementById("result").innerHTML = c;
};

body {
  margin: 30px;
}

<form>
  1st Number :
  <input type="text" id="firstNumber" />
  <br>2nd Number:
  <input type="text" id="secondNumber" />
  <br>
  <input type="button" onClick="multiplyBy()" value="Multiply" />
  <button onClick=d ivideBy()>Divide</button>
</form>
<p>The Result is :
  <br>
</p>
<p id="result"></p>

Answer 1

如果您使用按钮和表单，您需要指定按钮的类型，即提交、按钮 或重置。默认值为submit，它将提交表单。

其次有一个错别字

<button onClick=d ivideBy()>Divide</button>

相反，它将是onclick =“devideBy()”

您需要在函数内使用这两个变量。原因是当 js 在开始解析时，它会将值设置为 0，因为这些输入为空并且在函数内您得到 0。

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

HTML

<form>
  1st Number :
  <input type="text" id="firstNumber" />
  <br>2nd Number:
  <input type="text" id="secondNumber" />
  <br>
  <input type="button" onClick="multiplyBy()" value="Multiply" />
   <!--button type button -->
  <button type = "button" onClick="divideBy()">Divide</button>
</form>
<p>The Result is :
  <br>
</p>
<p id="result"></p>

JS

function multiplyBy() {
  var num1 = document.getElementById("firstNumber").value;
  var num2 = document.getElementById("secondNumber").value;
  var c = num1 * num2;
  document.getElementById("result").innerHTML = c;
}

var divideBy = function() {
  var num1 = document.getElementById("firstNumber").value;
 var num2 = document.getElementById("secondNumber").value;
  var c = num1 / num2;
  document.getElementById("result").innerHTML = c;
};

Working jsfiddle