在 html 中使用 JavaScript 從表單獲取輸入

Question

我在 html 中創建了一個輸入表單，並嘗試使用 JavaScript 獲取此輸入字段的值。

當我提醒它時，要檢查它是否有效，它會返回一個空值。 代碼如下。 可能是什么問題呢？

 var num1 = document.getElementById('numb1').value; var num2 = document.getElementById('numb2').value; var button = document.getElementsByTagName('button'); var show = document.getElementById('shows'); for (let i = 0; i < button.length; i++) { if(button[i].id == 'plus'){ button[i].onclick = function (){ var a = num1 + num2; alert(a); } } }

 <div class="container"> <div class="set"> <input type="text" id="numb1" placeholder="enter a number" > <input type="text" id="numb2" placeholder="enter a number"> <div class="buttons"> <button id="plus">+</button> <button id="min">-</button> <button id="mult">*</button> <button id="div">/</button> </div> <div class="show" id="shows"></div> </div> </div>

Answer 1

這是因為您在回調 function 之外保留了以下行：

var num1 = document.getElementById('numb1').value;
var num2 = document.getElementById('numb2').value;

因此， num1和num2僅在頁面加載時初始化一次。 此時（ num1和num2 ）都具有空值。 因此它不會每次都被初始化並顯示和空值。

筆記：

• 考慮使用parseInt()或parseFloat()將輸入文本解析為數值
• 您應該將JavaScript代碼保留在<script>標記中。

以下是更正的代碼片段：

 var button = document.getElementsByTagName('button'); var show = document.getElementById('shows'); for (let i = 0; i < button.length; i++) { if(button[i].id == 'plus'){ button[i].onclick = function (){ var num1 = document.getElementById('numb1').value; var num2 = document.getElementById('numb2').value; var a = parseFloat(num1 )+ parseFloat(num2); alert(a); } } }

 <div class="container"> <div class="set"> <input type="text" id="numb1" placeholder="enter a number" > <input type="text" id="numb2" placeholder="enter a number"> <div class="buttons"> <button id="plus">+</button> <button id="min">-</button> <button id="mult">*</button> <button id="div">/</button> </div> <div class="show" id="shows"></div> </div> </div>

Answer 2

您需要在單擊按鈕時獲取輸入的值，而不是在頁面加載時。

var button = document.getElementsByTagName('button');
var show = document.getElementById('shows');
for (let i = 0; i < button.length; i++) {
if(button[i].id == 'plus'){
    button[i].onclick = function (){
        var num1 = parseFloat(document.getElementById('numb1').value);
        var num2 = parseFloat(document.getElementById('numb2').value);
        var a = num1 + num2;
        alert(a);
    }   
} 
}

上面的代碼將在單擊按鈕時獲取輸入的值。 我還假設您希望將值轉換為浮點數，如果不是這種情況，則刪除 parseFloat function 以使其：

var num1 = document.getElementById('numb1').value;
var num2 = document.getElementById('numb2').value;