Javascript 我在执行简单切换程序时遇到此错误_Javascript_Html_Css

Javascript 我在执行简单切换程序时遇到此错误

javascript html css

Javascript 我在执行简单切换程序时遇到此错误,javascript,html,css,Javascript,Html,Css,[我不知道为什么会出现此错误，我的JS代码直接在浏览器的控制台中运行良好，但当我尝试将.JS文件附加到html时，会出现此错误。[][1]1 var button1=document.querySelector（“按钮”）； var isPurple=false；按钮1.addEventListener（“单击”，函数（）{ 如果（isPurple）{ document.body.style.background=“白色”； isPurple=false； }否则{ document.bod

[我不知道为什么会出现此错误，我的JS代码直接在浏览器的控制台中运行良好，但当我尝试将.JS文件附加到html时，会出现此错误。[][1]1

var button1=document.querySelector（“按钮”）；
var isPurple=false；
按钮1.addEventListener（“单击”，函数（）{
如果（isPurple）{
document.body.style.background=“白色”；
isPurple=false；
}否则{
document.body.style.background=“紫色”；
isPurple=true；
}
});
文件
点击我

提供的代码似乎工作正常-如注释中所述-在放置外部js的位置-使sa与众不同-它应该放在代码的末尾-就在结束正文标记之前。作为规则-将所有外部CSS文件放在头部，将所有外部js文件放在正文中-除非有一些基于渲染的日志javascript中所需的ic

在本例中，javascript旨在使用querySelector（）识别按钮，但它不在DOM中，因此无法识别

此外，您可以简化代码，只需在单击时切换变量，然后使用三元组添加/删除设置了背景色的类。使用附加样式的类总比通过javascript修改CSS好

var button1=document.querySelector（“按钮”）；
var isPurple=false；
按钮1.addEventListener（“单击”，函数（）{
isPurple=！isPurple；
isPurple
？document.body.classList.add（'purple'）
：document.body.classList.remove（'purple'）
})；

.purple{
背景：紫色；
}


文件
点击我

问题是，在运行JavaScript时，DOM中还不存在button元素。请稍后加载它，然后它应该存在

通常，明智的做法是加载这样的JS，即加载后立即运行，或者将其放入window.onload函数中（特别是如果代码依赖于已经加载的图像）


文件
点击我

你把

脚本

标签放在你的

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 lang="en">
<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>

<!DOCTYPE html>
<html lang="en">
<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>