我在执行简单的切换程序时收到此错误
[我不知道为什么会收到此错误，我的 JS 代码直接在浏览器的控制台中运行良好，但是当我尝试将 .js 文件附加到我的 html 时，我收到此错误。
var button1 = document.querySelector("button");
var isPurple = false;
button1.addEventListener("click", function(){
if(isPurple){
document.body.style.background = "white";
isPurple = false;
} else {
document.body.style.background = "purple";
isPurple = true;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="MyTitle.js"></script>
</head>
<body>
<button>click me</button>
</body>
</html>
料青山看我应如是浏览 104回答 2
2回答
-
杨__羊羊
提供的代码似乎工作正常 - 正如注释中所述 - 您放置外部js的位置 - 有所不同 - 它应该放置在代码的末尾 - 就在结束正文标记之前。通常，将所有外部 CSS 文件放在 head 中，将所有外部 js 文件放在 body 中，除非 javascript 中需要一些基于渲染的逻辑。在本例中 - javascript 旨在使用 querySelector() 来识别按钮 - 但它不在 DOM 中，因此无法识别。另外 - 您可以简化您的代码，只需在单击时切换变量，然后使用三元组来添加/删除一个类，并将背景颜色设置为该类。使用附加样式的类总是比通过 JavaScript 修改 CSS 更好。var button1 = document.querySelector("button");var isPurple = false;button1.addEventListener("click", function(){ isPurple = !isPurple; isPurple ? document.body.classList.add('purple') : document.body.classList.remove('purple')});.purple { background: purple;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button>click me</button> <script src="MyTitle.js"></script></body></html>当然 - 您实际上可以完全删除变量 - 如果您可以在可能的情况下远离全局变量，它总是更好 - 下面只是在单击按钮时切换类。var button1 = document.querySelector("button");button1.addEventListener("click", function(){ document.body.classList.toggle('purple')});.purple { background: purple;}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="MyTitle.js"></script></head><body> <button>click me</button> <script src="MyTitle.js"></script></body></html> -
HUH函数
问题是，当 JavaScript 运行时，按钮元素还不存在于 DOM 中。之后加载它，然后它应该就可以正常存在了。一般来说，明智的做法是加载此类 JS，即在加载时立即运行，或者将其放入 window.onload 函数中（特别是如果代码依赖于已加载的图像）。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head><body> <button>click me</button><script src="MyTitle.js"></script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript