javascript - 关于javascript变量的问题，求助~

Question

我把5、4分别填入空白的1st Number、2nd Number，然后点击输出中的Multiply。我期待得到 20，但我得到了零，为什么？

这是代码(也是 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

如果你使用button & form你需要指定按钮的类型是submit,button 或 重置。默认值为 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