如何为所有type为range的input添加事件监听器，将值同步到后续span

你的代码存在多处逻辑错误，选择器写法确实是问题之一，具体错误点和修复方法如下：

• 选择器用法错误：getElementsByTagName() 只能接收HTML标签名作为参数（比如input、div），不支持属性选择器语法，所以你传input[type=range]拿不到任何元素，自然不会有报错也不会触发逻辑。正确的选择方法是用document.querySelectorAll('input[type="range"]')，支持属性选择器匹配。
• 事件绑定对象错误：你获取的ranges是DOM元素集合，不能直接给集合绑定事件，需要遍历到每个单独的元素再绑定，应该写ranges[i].addEventListener()。
• closest()方法用法错误：closest()的作用是查找当前元素的祖先节点中匹配选择器的元素，而你的.range_sel是input后续兄弟节点的子元素，不属于input的祖先，所以永远找不到目标元素，需要先定位到公共父容器再查找目标span。
• 体验优化：建议用input事件替代change事件，change事件只有在滑块拖拽结束松开鼠标时才触发，input事件可以在滑块拖动过程中实时同步数值，交互体验更好。

修正后的完整JS代码 #

// 正确获取所有type为range的input元素
let ranges = document.querySelectorAll('input[type="range"]');
for (var i = 0 ; i < ranges.length; i++) {
    // 给每个range元素绑定事件
    ranges[i].addEventListener("input", function () {
        // 先找共同父容器，再定位对应的展示span
        let show = this.closest('.rowinput').querySelector('.range_sel');
        show.innerHTML = this.value;
    });
};

内容的提问来源于stack exchange，提问作者C.Hillert