输入框Javascript中的数字

Question

我正在尝试从输入框中获取一个数字，但它会返回一个空字符串作为警报。我错过了什么？

var button = document.getElementsByClassName("btn")[0];
var num = document.getElementById("input").value;
button.addEventListener("click", calculate);

function calculate() {
    alert(num);
}

<input type="number" id="input">
<input type="button" value="Calculate!" class="btn">
<p id="result">

Answer 1

您需要读取函数内部输入的值，而不是在页面加载期间。以下代码将起作用。

var button = document.getElementsByClassName("btn")[0];

button.addEventListener("click", calculate);

function calculate() {
  var num = document.getElementById("input").value;
  alert(num);
}

Answer 2

您在页面加载时读取输入的值（当它具有默认值时，它是一个空字符串）。

然后，您可以在函数运行时提醒读取的结果。

您需要读取函数内部的值，以便在函数运行时获取值。

Answer 3

你为什么不这样做呢？

<input type="number" id="input">
<input type="button" onclick="calculate()" value="Calculate!" class="btn">
<p id="result"></p>

<script>
  function calculate() {
      var num = document.getElementById("input").value;
      alert(num);
      document.getElementById("result").innerHTML = num;
  }
</script>

工作示例：https://jsfiddle.net/j9eb0xfm/3/

Answer 4

然后我想你可以这样做以避免添加属性。

<input type="number" id="input">
<input type="button" value="Calculate!" class="btn">
<p id="result"></p>

<script>
    var button = document.getElementsByClassName("btn")[0];
    button.addEventListener('click', function() {
    calculate();
  });
  function calculate() {
    var num = document.getElementById("input").value;
    alert(num);      
    document.getElementById("result").innerHTML = num;
  }
</script>

工作示例：https://jsfiddle.net/j9eb0xfm/5/