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

JavaScript - add eventListener to all input with type range

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

控制台没有输出任何问题,是否可能,我无法在

中定义输入类型

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;
        });
    };

几件事:

  • 您应该将事件侦听器添加到索引 iranges 中的项目,而不是 ranges 本身(它是一个 HTMLCollection)

  • closest() gets the closest parent element that matches the selector. The element you are trying to select inside the event listener is the child of a sibling. You can select it by getting the input's 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>