JavaScript输入计数上限输出0至上限所有数字的代码运行异常排查

核心错误点 #

• DOM API 拼写错误：代码中的 document.getElementbyId 写法错误，正确写法为 document.getElementById，其中字母 b 必须大写，拼写错误会触发JS运行时报错，无法正常获取输入框元素，是代码无法运行的直接原因。
• 缺少输出容器清空逻辑：每次点击运行按钮前没有清空上一次的输出结果，多次点击会叠加生成多组序列，不符合功能预期。

修复后代码 #

JavaScript 代码 #

function display() {
  // 修正API拼写错误
  var num = document.getElementById("UserIN").value;
  num = parseInt(num);
  // 先清空上一次的输出内容
  document.getElementById("outdisplay").innerHTML = '';
  var counter = 0;
  while (counter <= num) {
    document.getElementById("outdisplay").innerHTML += counter + "<br/>";
    counter += 1;
  }
}

HTML 代码 #

原有HTML代码无需修改，可直接复用：

<input type="number" id="UserIN">
<button onclick="display()">Run</button>
<div id="outdisplay"></div>

可选优化（输入校验） #

可以新增非合法输入的校验逻辑，避免用户输入负数、非数字时出现异常输出：

function display() {
  var num = document.getElementById("UserIN").value;
  num = parseInt(num);
  const outputEle = document.getElementById("outdisplay");
  // 输入合法性校验
  if (isNaN(num) || num < 0) {
    outputEle.innerHTML = "请输入有效的非负整数作为上限";
    return;
  }
  outputEle.innerHTML = '';
  let counter = 0;
  while (counter <= num) {
    outputEle.innerHTML += counter + "<br/>";
    counter++;
  }
}

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