时间戳

首页 > 解决方案 > 我的 JavaScript 文件已链接，但 JavaScript 代码不起作用

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

问题描述

我的 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>

标签： javascripthtmldom

解决方案

这与您的query selector. 您用一个选择了所有按钮querySelector。当您选择所有带有 a 的按钮时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>

推荐阅读