如何正确将HTML input输入的值传递给JavaScript并触发对应逻辑

原有代码存在的问题 #

• 重复使用const声明变量value_1：const用于声明不可重新赋值、不可重复声明的常量，不符合你需要动态获取输入值的需求，应当替换为let
• 缺少输入事件监听逻辑：原有代码仅会在页面初次加载时执行一次，无法在你修改input输入框内容时触发判断逻辑
• 未做类型转换：input元素的value属性默认返回字符串类型，直接和数字0做判断可能出现类型不匹配的异常

修正后的完整代码 #

<body>
<input type="number" name="a" id="commands"><br>
<canvas id="myChart1"></canvas>

<script>
// 初始值设置为0
let value_1 = 0;
// 获取input元素
const inputEl = document.getElementById("commands");

// 绑定输入事件监听，每次输入内容变化时触发执行
inputEl.addEventListener('input', function() {
  // 将输入的字符串转成数字
  value_1 = Number(inputEl.value);
  if(value_1 != 0) {
    // 你需要执行的代码写在这里
    console.log('触发判断逻辑，当前值为：', value_1);
  }
})
</script>    
</body>

补充说明 #

如果需要页面加载完成后就先执行一次判断逻辑，可以在事件绑定完成后额外调用一次事件回调函数即可。

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