2 回答
TA贡献1943条经验 获得超7个赞
提供的代码似乎工作正常 - 正如注释中所述 - 您放置外部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>
TA贡献1836条经验 获得超4个赞
问题是,当 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>
添加回答
举报