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