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;
});
};
几件事:
您应该将事件侦听器添加到索引 i
中 ranges
中的项目,而不是 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>
我尝试实现一个功能,即 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;
});
};
几件事:
您应该将事件侦听器添加到索引
i
中ranges
中的项目,而不是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'snextElementSibling
.没有带有标签
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>