輸入框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/