JavaScript - 将 eventListener 添加到具有类型范围的所有输入答案

【问题标题】：JavaScript - add eventListener to all input with type rangeJavaScript - 将 eventListener 添加到具有类型范围的所有输入
【发布时间】：2021-10-17 17:02:39
【问题描述】：

我尝试实现一个功能，即 range 类型的输入元素总是将它们的值解析为位于范围之后的 span 元素。

控制台没有输出任何问题，是否有可能，我无法在中定义输入的类型

HTML

<div class="rowitem rowinput w100">
    <label for="person">Units</label>
    <input type="range" id="units" name="units" min="1" max="30" value="1" step="1" />
    <div class="range_sel_cont">
        <span class="range_sel">1</span>
         Units
    <div>
</div>

JS（原版）

    let ranges = document.getElementsByTagName('input[type=range]');
    for (var i = 0 ; i < ranges.length; i++) {
       ranges.addEventListener ("change", function () {
           let show = this.closest('.range_sel');
           show.innerHTML = this.value;
        });
    };

【问题讨论】：

您没有仔细检查以确保 .closest() 确实按照您的想法进行。
对...最近的只查找向上祖先树
range 周围缺少引号，还记得我们如何在 CSS 中选择它吗？ input[type="range"]。 IMP：您不能使用相同类型的引号，就像在上面的引用中您使用单引号（'，'）在getElementsByTagName 中，因此在指定range 时，您将使用双引号（" 、"）
@AdarshDubey 不需要报价。见：CSS attribute selectors: The rules on quotes (", ' or none?)

标签： javascript input range addeventlistener

【解决方案1】：

几件事：

您应该将事件侦听器添加到索引 i 的 ranges 中的项目，而不是 ranges 本身（这是一个 HTMLCollection）
closest() 获取与选择器匹配的最近的父元素。您尝试在事件侦听器中选择的元素是兄弟元素的子元素。您可以通过获取输入的nextElementSibling 来选择它。
没有带有标签input[type=range] 的元素。如果要获取与该选择器匹配的所有元素，请使用querySelectorAll

let ranges = document.querySelectorAll('input[type=range]');
for (var i = 0; i < ranges.length; i++) {
  ranges[i].addEventListener("change", function() {
    let show = this.nextElementSibling.querySelector('.range_sel');
    show.innerHTML = this.value;
  });
};

<div class="rowitem rowinput w100">
  <label for="person">Units</label>
  <input type="range" id="units" name="units" min="1" max="30" value="1" step="1" />
  <div class="range_sel_cont">
    <span class="range_sel">1</span> Units
    <div>
    </div>

【讨论】：