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

标签： javascript

Answer 1

这是因为您在回调函数之外保留了以下行：

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

因此，num1并且num2仅在页面加载时初始化一次。此时 (num1和num2) 都具有空值。因此它不会每次都被初始化并显示和空值。

笔记：

• parseInt()考虑使用or将输入文本解析为数值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>