JavaScript循环实现：按用户输入的数值输出对应范围的数字

你的代码存在3个核心问题：

• 循环上限硬编码：for循环的终止条件写死为i < 100，完全没有用到你获取到的用户输入值number，所以永远只会输出0到99的数字
• 输入值类型错误：从input元素拿到的value默认是字符串类型，直接用于数值比较逻辑会有异常，需要先转换为数字类型
• 缺失输入校验：没有对用户输入的内容做合法性判断，输入非数字、负数时会出现逻辑错误

1. 修改JS逻辑 #

function changeText() {
  // 将输入的字符串转为数字
  const targetCount = Number(document.getElementById('numbersBox').value);
  // 合法性校验
  if (isNaN(targetCount) || targetCount < 0 || !Number.isInteger(targetCount)) {
    document.getElementById('message').innerHTML = '<br>请输入有效的非负整数';
    return;
  }
  // 可根据需求调整上限，避免输入过大导致页面卡顿
  if (targetCount > 1000) {
    document.getElementById('message').innerHTML = '<br>请输入不大于1000的数值';
    return;
  }
  let result = '';
  // 若需要包含用户输入的数值，把条件改为 i <= targetCount
  for (let i = 0; i < targetCount; i++) {
    result += '<br>' + i;
  }
  document.getElementById('message').innerHTML = result;
}

function clearText() {
  document.getElementById('message').innerHTML = '<br>';
  document.getElementById('numbersBox').value = '';
}

2. 可选HTML优化（提升输入体验） #

把输入框的类型改为number，限制用户只能输入数字，减少异常输入的概率：

<input type="number" min="0" max="1000" id="numbersBox">

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