首頁猿問我在執行簡單的切換程序時收到此錯誤

我在執行簡單的切換程序時收到此錯誤

JavaScript

料青山看我應如是 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>

<title>Document</title>

</head>

<body>

<button>click me</button>

</body>

</html>

當然 - 您實際上可以完全刪除變量 - 如果您可以在可能的情況下遠離全局變量，它總是更好 - 下面只是在單擊按鈕時切換類。

var button1 = document.querySelector("button");

button1.addEventListener("click", function(){

document.body.classList.toggle('purple')

});

.purple {

background: purple;

}

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<button>click me</button>

</body>

</html>

反對回復 2023-07-14

HUH函數

TA貢獻1836條經驗獲得超4個贊

問題是，當 JavaScript 運行時，按鈕元素還不存在于 DOM 中。之后加載它，然后它應該就可以正常存在了。

一般來說，明智的做法是加載此類 JS，即在加載時立即運行，或者將其放入 window.onload 函數中（特別是如果代碼依賴于已加載的圖像）。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<button>click me</button>

</html>

反對回復 2023-07-14

2 回答
0 關注
144 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我在執行簡單的切換程序時收到此錯誤

我在執行簡單的切換程序時收到此錯誤

2 回答

添加回答