Uncaught TypeError：Object＃<NodeList> has no method'addEventListener'

Question

我在一个相对简单的HTML文件中有一个按钮元素。我想添加事件侦听器，但我不断收到错误，我不知道为什么：Uncaught TypeError: Object #<NodeList> has no method 'addEventListener'

我努力学习“的addEventListener”方法，但我不明白这有什么错什么我做：

HTML：

<button>guess</button>

JS：

var myButton = document.getElementsByTagName('button'); 

myButton.addEventListener('click', doSomething, false); 

var doSomething = function(e){ 
    console.log('I was clicked!'); 

    e.preventDefault(); 
    return false; 
}; 

谢谢那些帮助谁编辑。

总之对可能遇到此问题的任何其他新手：

1. 当您使用document.getElementsByTagName()或返回的NodeList任何其他方法，你必须指定要操纵哪个节点。
2. 请确保您在之后添加了事件侦听器该函数已被声明。

Answer 1

getElementsByTagName('button')返回一个列表，而不是元素。您需要将EventListener添加到该列表中的第一个元素。

尝试：

var myButton = document.getElementsByTagName('button')[0]; 

Answer 2

试试这个：

var myButton = document.getElementsByTagName('button')[0]; 

Answer 3

getElementsByTagName()返回元素的列表，一个节点列表，并addEventListener一次只能工作一个单一的元素，所以这是很好的形式重复，这样你赢了”吨得到拧，如果你决定有一个以上的元素，你就习惯了编写事件处理这样

var myButton = document.getElementsByTagName('button'); 

var doSomething = function(e){ 
    e.preventDefault(); 
    console.log('I was clicked!'); 
}; 

for (var i=myButton.length; i--;) { 
    myButton[i].addEventListener('click', doSomething, false); 
}