来自输入框Javascript的数字

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

var button=document.getElementsByClassName（“btn”）[0]；
var num=document.getElementById（“输入”）.value；
按钮。addEventListener（“单击”，计算）；
函数计算（）{
警报（num）；
}

在页面加载时读取输入值（当其具有默认值时，为空字符串）

然后，当函数运行时，您会提醒读取的结果

---

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

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

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

button.addEventListener("click", calculate);

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

---

你为什么不这样做呢

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

函数计算（）{
var num=document.getElementById（“输入”）.value；
警报（num）；
document.getElementById（“结果”）.innerHTML=num；
}

---

工作示例：

那么我想您可以这样做以避免添加属性

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

var按钮=document.getElementsByClassName（“btn”）[0]；
addEventListener（'click'，function（）{
计算（）；
});
函数计算（）{
var num=document.getElementById（“输入”）.value；
警报（num）；
document.getElementById（“结果”）.innerHTML=num；
}

---

工作示例：

num变量保存执行这行代码时输入字段包含的内容，它不会自动更新。您希望读取处理程序函数中的字段值…请尝试在

函数calculate（）{…}

中声明

var num=…

我不喜欢在HTML元素中添加太多的属性。