我的 JavaScript 文件已链接，但 JavaScript 代码不起作用答案

【问题标题】：My JavaScript file is linked, but JavaScript code is not working我的 JavaScript 文件已链接，但 JavaScript 代码不起作用
【发布时间】：2020-05-12 20:40:30
【问题描述】：

我的 JavaScript 文件已链接并且还在工作，当我链接 .js 文件时我才知道这一点，我创建了一个 alert("working"); 并且它正在工作，但是当我进一步编码时它没有工作。

然后我在 google chrome 控制台上尝试了（图片已附上），它开始工作了。为什么.js 文件一开始有响应但之后没有工作。


document.querySelector("button").AddEventListener("click", handleClick);

function handleClick(){
        alert("I am Clicked!!!");
}

<!DOCTYPE html> 
<html lang="en" dir="ltr">

<head>
        <meta charset="utf-8">
        <title>Drum Kit</title>
        <link rel="stylesheet" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>

        <h1 id="title">Drum ???? Kit</h1>
        <div class="set">
                <button class="w drum">w</button>
                <button class="a drum">a</button>
                <button class="s drum">s</button>
                <button class="d drum">d</button>
                <button class="j drum">j</button>
                <button class="k drum">k</button>
                <button class="l drum">l</button>
        </div>

        <script src="index.js" charset="utf-8"></script>
        <footer>
                Made with ❤️ in London.
        </footer>
</body>

</html>

【问题讨论】：

应该是addEventListener() 而不是AddEventListener()
打开控制台。阅读错误消息。你打错字了。 AddEventListener 应该是 addEventListener
querySelector 只会将事件侦听器添加到与选择器匹配的第一个元素 -> 因此，即使您修复了错字，也只有第一个按钮会触发事件：（@ 987654321@)。如果您需要在所有按钮上触发此单击事件，请使用querySelectorAll，然后迭代集合，为每个按钮添加一个事件侦听器。

标签： javascript html dom

【解决方案1】：

这与您的query selector 有关。您使用一个querySelector 选择了所有按钮。当您选择所有带有querySelectorAll 的按钮时，eventListener 仅适用于第一个元素。所以我创建了一个 for loop 循环遍历所有按钮。

var btn = document.querySelectorAll("button");

for (var i = 0 ; i < btn.length; i++) {
   btn[i].addEventListener('click' , handleClick) ; 
}

function handleClick(){
        alert("I am Clicked!!!");
}

<h1 id="title">Drum ? Kit</h1>
        <div class="set">
                <button class="w drum">w</button>
                <button class="a drum">a</button>
                <button class="s drum">s</button>
                <button class="d drum">d</button>
                <button class="j drum">j</button>
                <button class="k drum">k</button>
                <button class="l drum">l</button>
        </div>

        <script src="index.js" charset="utf-8"></script>
        <footer>
                Made with ❤️ in London.
        </footer>

【讨论】：

【解决方案2】：

你有一些错误：

如果应该使用addEventListener 而不是AddEventListener：

document.querySelector("button").addEventListener('click',handleClick)
function handleClick(){
        alert("I am Clicked!!!");
}

<h1 id="title">Drum ? Kit</h1>
<div class="set">
     <button class="w drum">w</button>
     <button class="a drum">a</button>
     <button class="s drum">s</button>
     <button class="d drum">d</button>
     <button class="j drum">j</button>
     <button class="k drum">k</button>
     <button class="l drum">l</button>
</div>

您的代码仅适用于第一个按钮，如果您想将该功能应用于您需要使用的所有按钮 querySelectorAll 并遍历列表以将事件侦听器添加到每个按钮，如下所示：

let btns = document.querySelectorAll("button");
for(let i = 0; i < btns.length; i++)
     btns[i].addEventListener('click', handleClick)
function handleClick(){
        alert("I am Clicked!!!");
}

<h1 id="title">Drum ? Kit</h1>
<div class="set">
     <button class="w drum">w</button>
     <button class="a drum">a</button>
     <button class="s drum">s</button>
     <button class="d drum">d</button>
     <button class="j drum">j</button>
     <button class="k drum">k</button>
     <button class="l drum">l</button>
</div>

【讨论】：

问题是我的代码甚至不适用于使用外部 JavaScript 文件的第一个按钮，但是当我在 chrome 控制台上使用相同的代码时，它可以工作。现在，问题可能是我可能没有正确链接外部 JavaScript 文件，为此我评论了 JavaScript 文件并运行了一个简单的警报（“嗨，我正在工作！！”）；它正在显示带有该消息的警报。这意味着 JavaScript 文件已正确链接，但代码无法正常工作...
请将您的代码链接到小提琴，以帮助您调试问题。