我的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: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>这和你的 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>