HTML实现5个滑动条仅首个可联动更新数值问题求助

问题原因 #

• 单个HTML页面只能存在1个<body>标签，拆分两个编写多个滑动条属于语法错误
• document.querySelector("input")默认只会匹配页面中第一个符合条件的input元素，所以第二个滑动条的选择器实际还是选中了第一个滑动条，导致绑定事件失效
• 变量命名冲突，第二个脚本中重复使用了value变量，还出现了未定义的slider变量调用
• HTML结构存在多余的闭合标签，嵌套逻辑错误

修复方案 #

以下为可直接运行的完整代码，支持5个滑动条各自独立更新数值：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多滑动条示例</title>
</head>
<body>
    <!-- 第1个滑动条 -->
    <div class="slider-group">
        <input type="range" name="eng1" min="0" max="180" value="20">
        <div class="value">20</div>
    </div>
    <!-- 第2个滑动条 -->
    <div class="slider-group">
        <input type="range" name="eng2" min="0" max="180" value="30">
        <div class="value">30</div>
    </div>
    <!-- 第3个滑动条 -->
    <div class="slider-group">
        <input type="range" name="eng3" min="0" max="180" value="40">
        <div class="value">40</div>
    </div>
    <!-- 第4个滑动条 -->
    <div class="slider-group">
        <input type="range" name="eng4" min="0" max="180" value="50">
        <div class="value">50</div>
    </div>
    <!-- 第5个滑动条 -->
    <div class="slider-group">
        <input type="range" name="eng5" min="0" max="180" value="60">
        <div class="value">60</div>
    </div>

    <script>
        // 批量绑定所有滑动条事件，无需重复编写脚本
        const allSliders = document.querySelectorAll('.slider-group input');
        allSliders.forEach(slider => {
            const valueDisplay = slider.nextElementSibling;
            slider.addEventListener('input', function() {
                valueDisplay.textContent = this.value;
            })
        })
    </script>
</body>
</html>

优化说明 #

• 统一使用.slider-group包裹每个滑动条和对应的数值显示框，结构统一，便于批量选择
• 用querySelectorAll选择所有滑动条，循环绑定事件，不用为每个滑动条单独写重复的脚本代码
• 每个滑动条通过nextElementSibling直接获取同组的数值显示元素，避免变量冲突和选择器匹配错误

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