输入框Java编号

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/