HTML表单number输入框取值始终返回0的技术问题

嘿，我来帮你捋捋这个问题的根源～

你现在的代码是页面一加载就直接执行了获取angle值的逻辑，但这时候用户还没来得及在输入框里输入任何内容呀！form.angle.value这时候是空字符串，用Number()转成数字自然就是0了，所以alert弹出的总是0。而且更关键的是，你表单里的submit按钮点击后会触发默认的表单提交行为——页面直接刷新，就算你后来填了值，页面一刷新又回到初始状态，等于之前的输入全白费了。

接下来给你修正后的代码，你可以参考下：

<form id="info"> 
  Power:<br> 
  <input type="number" name="power" id="power"><br> 
  Angle:<br> 
  <input type="number" name="angle" id="angle"/> 
  <input type="submit" value="Submit"/> 
</form>
<canvas id="canvas"></canvas>

<script>
// 先获取DOM元素
const form = document.getElementById("info"); 
const canvas = document.getElementById("canvas"); 
const ctx = canvas.getContext("2d"); // 只需要获取一次上下文就行

// 给表单绑定提交事件处理函数
form.addEventListener('submit', function(event) {
  // 阻止表单默认的提交刷新行为
  event.preventDefault();
  
  // 这时候再获取用户输入的值
  const angle = Number(form.angle.value); 
  const power = Number(form.power.value) || 0.01; // 给power设置默认值，防止空输入
  
  alert(angle); 
  // 这里把angle和power传入你的其他函数
  // yourOtherFunction(angle, power);
});
</script>

几个关键的改动点：

• 把获取表单值的逻辑放到了表单的submit事件处理函数里，只有用户点击提交按钮时才会执行，这时候已经有用户输入的有效值了。
• 用event.preventDefault()阻止了表单默认的刷新行为，避免页面重置导致输入丢失。
• 优化了canvas上下文的获取，不需要重复获取两次，一次就足够使用。
• 给power加了默认值兜底，防止用户未填写时出现异常。

这样改完之后，你输入角度值点击提交，alert就能正确弹出你输入的数值啦～

内容的提问来源于stack exchange，提问作者Nail Tosun