Question

我看到有些人遇到这个问题，但是找不到适合我的代码的解决方案。我正在尝试使用<img>标签内的许多<div>标签来构建一个记忆游戏，以便在Javascript中创建一个addEventListener，可以为不同的对象调用相同的函数。但是当我尝试在Chrome上打开它时说：

main2.js:21 Uncaught TypeError: img_deck.addEventListener is not a function

下面是我的代码：

HTML：

<body onload="sortDeck()">
    <div class="deck">
        <tr>
            <th> <img id="0" src="back.jpg"> </th>
            <th> <img id="1" src="back.jpg"> </th>
            <th> <img id="2" src="back.jpg"> </th>
            <th> <img id="3" src="back.jpg"> </th>
        </tr>
        <tr>
            <th> <img id="4" src="back.jpg"> </th>
            <th> <img id="5" src="back.jpg"> </th>
            <th> <img id="6" src="back.jpg"> </th>
            <th> <img id="7" src="back.jpg"> </th>
        </tr> 
        <tr>
            <th> <img id="8" src="back.jpg"> </th>
            <th> <img id="9" src="back.jpg"> </th>
            <th> <img id="10" src="back.jpg"> </th>
            <th> <img id="11" src="back.jpg"> </th>
        </tr>                 
    </div>
</body>

JS：

var img_deck = document.getElementsByTagName("DIV");
img_deck.addEventListener("click", clickCard);

Answer 1

document.getElementById将返回一个id与param相同的html元素。

document.getElementsByTagName返回html元素的数组，其标记与参数相同。

所以在您的脚本中，

var img_deck = document.getElementsByTagName("DIV");
    img_deck.addEventListener("click" , clickCard);

img_deck将具有元素数组，其中标签为'DIV' 因此，您应该为img_deck制作一个循环，并为该循环中的每个元素添加事件监听器

像这样

var img_deck = document.getElementsByTagName("DIV");
img_deck.forEach(function(elem){
    elem.addEventListener("click", clickCard);
})

Answer 2

正如您所使用的方法所建议的那样，getElementsByTagName作为数组返回多个元素。您可以像这样遍历此数组：

const divs = document.getElementsByTagName("DIV");
for (const div of divs) {
    div.addEventListener("click", clickCard);
}

“ addEventListener不是函数”问题

2 个答案: