请求协助：解决onkeyup事件中info1 is not a function错误

嗨，这个问题其实挺常见的，我帮你捋清楚原因和解决方案：

错误根源 #

你给输入框设置的id="info1"，同时又把函数命名为info1()。在浏览器的全局作用域里，带有id的DOM元素会自动被挂载到window对象上，也就是说window.info1会指向这个输入框元素，直接覆盖了你定义的同名函数。当触发onkeyup="info1()"时，浏览器会把info1当成DOM元素而非函数，自然就抛出"不是函数"的错误了。

修复方案 #

只需要把函数名或者输入框的id改成不一样的就行，这里我推荐修改函数名（避免后续其他地方用到id时还要调整），同时完善生成滑块的逻辑：

修改后的完整代码示例 #

<!DOCTYPE html>
<html>
<body>
  <input type="number" id="info1" onkeyup="generateSliders()" placeholder="输入数量">
  <div id="sliderContainer"></div>

  <script type="text/javascript" charset="utf-8">
    function generateSliders() {
      // 获取输入框的值，转为数字，默认0
      const num1 = parseInt(document.getElementById("info1").value) || 0;
      const sliderContainer = document.getElementById("sliderContainer");
      
      // 先清空容器里已有的滑块，避免重复生成
      sliderContainer.innerHTML = '';

      // 循环生成对应数量的范围滑块
      for (let i = 0; i < num1; i++) {
        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = '0';
        slider.max = '100';
        slider.value = '50';
        // 给每个滑块加唯一标识，方便后续处理
        slider.id = `slider-${i+1}`;
        sliderContainer.appendChild(slider);
        // 加换行分隔，页面更整洁
        sliderContainer.appendChild(document.createElement('br'));
      }
    }
  </script>
</body>
</html>

关键修改点 #

• 把原函数名info1()改成了generateSliders()，和输入框idinfo1彻底区分开
• 新增了sliderContainer容器专门存放生成的滑块，避免页面结构混乱
• 加入清空容器的逻辑，防止多次输入后滑块重复叠加
• 用parseInt()处理输入值确保是数字类型，用|| 0处理空值或非数字输入的情况

这样修改后，onkeyup事件就能正常触发函数，根据输入的数量生成对应的范围滑块啦～

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