JavaScript初学者开发数字增减系统新增功能后页面失效求助

问题原因 #

• 第一个问题：函数名和DOM元素id重名冲突
  你给自定义函数命名为input，刚好页面里的输入框id也是input。在浏览器的全局作用域规则里，带id的DOM元素会被自动注册为同名全局变量，直接把你定义的input函数覆盖了，点击按钮调用时本质是在调用DOM元素而不是函数，直接报错导致页面逻辑完全失效。
• 第二个问题：输入框取值属性用错
  <input>是单标签元素，你输入的内容存储在value属性里，不是innerHTML。innerHTML是用来读写闭合标签内部的HTML内容的，你用innerHTML拿输入框的值永远拿不到你输入的内容。

修复方法 #

1. 把自定义的input函数改个名字，比如改成setStep即可，避免和输入框id冲突，同时HTML里Apply按钮的onclick对应的调用也要改成新的函数名
2. 把输入框取值的innerHTML换成value
3. 额外补充有效输入判断逻辑，避免用户没输入内容或者输入非数字时，步长b变成无效值

修复后的JS代码 #

let a = 0,
  b = 1

function inc() {
  a += b
  document.getElementById("x").innerHTML = "x = " + a;
};

function dec() {
  a -= b
  document.getElementById("x").innerHTML = "x = " + a;
};
// 函数名修改为setStep，避免和id=input的元素冲突
function setStep() {
  const inputVal = document.getElementById("input").value.trim();
  // 只有输入了有效数字才修改步长，否则保留原来的步长值
  if (inputVal && !isNaN(Number(inputVal))) {
    b = Number(inputVal);
  };
};

修复后的HTML对应修改部分 #

只需要调整Apply按钮的onclick调用即可，其他HTML、CSS代码不需要改动：

<input id="input"><button type="button" onclick="setStep()">Apply</button>

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