Question

我最近从使用jQuery库转而使用原始Javascript来更深入地理解该语言（尽管你会注意到jQuery在后台运行以支持遗留功能）。

我正在尝试使用.addEventListener()向btn设置点击事件，但在我的控制台中出现以下错误：

    Uncaught TypeError: pleaseWork.addEventListener is not a function
    at eval (eval at globalEval (jquery.min.js:2), <anonymous>:16:9)
    at eval (<anonymous>)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:4)
    at Ab (jquery.min.js:4)
    at z (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)
    at Object.send (jquery.min.js:4)
    at Function.ajax (jquery.min.js:4)
    at Function.n._evalUrl (jquery.min.js:4)

我不确定为什么我无法使用以下Javascript在function()上创建'click'。我的所有类名都是正确的，所以我只添加了我的Javascript而不是标记。

var form = document.getElementById('form');
var fieldsets = form.getElementsByTagName('fieldset');

var pleaseWork = document.getElementsByClassName('js primary medium btn');

var fieldsetCount = 0;

for (var i = 0, length = fieldsets.length; i < length; i++) {
    if(fieldsets[i].type == 'fieldset') {
        fieldsetCount++;
    };
};

console.log(fieldsetCount);

pleaseWork.addEventListener('click', function() {
    alert('Boom!');
});

非常感谢任何帮助。

Answer 1

函数getElementsByClassName将返回html元素的集合，因此使用indexer来访问返回的每个元素。

var pleaseWork = document.getElementsByClassName（'js primary medium btn'）;

for (var i = 0, length = pleaseWork.length; i < length; i++)
   pleaseWork[i].addEventListener('click', function(){alert('Boom!')});

Answer 2

document.getElementsByClassName（）返回一个数组。数组没有de方法.addEventListener（）

Answer 3

我对你的堆栈跟踪感到有点困惑。整个代码似乎是由jQuery执行的！

以下行返回一个数组（MDN documentation处的更多详细信息）

var pleaseWork = document.getElementsByClassName('js primary medium btn');

您必须循环浏览它们并分别在每个项目上附加处理程序。

for (i = 0; i < pleaseWork.length; i++) { 
    pleaseWork[i].addEventListener('click', function() {
    alert('Boom!');
   });
}

希望这会对你有所帮助。

我使用文件不正确吗？

3 个答案: