在不工作的类上使用 addEventListener

Question

我正在尝试在 var 上使用 addEventListener 和 getElementById 将我的脚本转换为 getElementByClassName 但这不起作用。如何解决？

查看我的代码

Javascript：

var input = document.getElementByClassName('myClass');

_slider.noUiSlider.on('update', function( values, handle ) {

    var value = values[handle];

    if ( handle ) {
        input.value = Math.round(value);
});

input.addEventListener('change', function(){
    _slider.noUiSlider.set([null, this.value]);
}, false);

HTML：

<input type="number" class="myClass">

如果我发现我的 div 带有 ID，但不能使用 CLASS，则此脚本可以完美运行。

Answer 1

没有 getElementByClassName。有 getElementsByClassName 返回一个集合。如果只有一个，则选择第一个索引。

var input = document.getElementsByClassName('myClass')[0];

其他选项是 querySelector

var input = document.querySelector('.myClass');

我的猜测是，您不仅需要一个元素，而且还需要多个元素，而不是循环遍历集合。

var inputs = document.getElementsByClassName('myClass');
//or
//var inputs = document.querySelectorAll('.myClass');
for( var i=0; i<inputs.length; i++){
    inputs[i].addEventListener("click", function() { console.log(this); } );
}