为了账号安全,请及时绑定邮箱和手机立即绑定

我在执行简单的切换程序时收到此错误

我在执行简单的切换程序时收到此错误

料青山看我应如是 2023-07-14 16:43:16
[我不知道为什么会收到此错误,我的 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>
查看完整描述

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>


查看完整回答
反对 回复 2023-07-14
?
HUH函数

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>


查看完整回答
反对 回复 2023-07-14
  • 2 回答
  • 0 关注
  • 103 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信