切換開關時，我從瀏覽器控制臺收到這些錯誤。由于某種原因它不起作用，我無法解決為什么這不起作用我剛剛開始使用Javascript所以如果我做了一些愚蠢的事情不要生我的氣。
Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
at getValue (darkModeSwitch.js:8)
at window.onload (index.html:17)
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at getValue (darkModeSwitch.js:13)
at HTMLInputElement.onclick (index.html:26)
HTML：
<div>
<ul>
<li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
<li><a href="projects/projects.html?version=691">Projektek</li>
<li><a class="active" href="index.html?version=692">Kezd?lap</a></li>
<li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label><script src="scripts/darkModeSwitch.js"></script>
</li>
<h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>
</ul>
</div>
CSS：
.lightmode{
background-color: white;
color: black;
}
Javascript：
const body = document.body
const anchor = document.getElementsByTagName("a");
const darkModeToggle = document.getElementById('darkModeToggle');
function getValue(){
if (darkModeToggle.checked) {
body.classList.remove("lightmode")
anchor.classList.remove("lightmode")
console.log("checked")
} else{
console.log("not checked")
body.classList.add("lightmode")
anchor.classList.add("lightmode")
}
};
uj5u.com熱心網友回復：
錯誤是因為您試圖classList一次修改多個元素；您的anchor變數包含一組 HTML 元素（所有錨點）而不是一個特定元素。
值得慶幸的是，由于 CSS 級聯，您不需要更改除主體之外的任何元素的類。只需a在 CSS 中處理這樣的元素，以便它們繼承body的顏色：
function getValue() {
document.body.classList.toggle("lightmode")
};body {
background-color: black;
color: white;
}
.lightmode {
background-color: white;
color: black;
}
a {
color: inherit;
}<body>
<ul>
<li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
<li><a href="projects/projects.html?version=691">Projektek</a></li>
<li><a class="active" href="index.html?version=692">Kezd?lap</a></li>
<li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label></li>
<h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>
</ul>
</body>uj5u.com熱心網友回復：
問題不在于 Body，而在于anchor. 您可以使用getElementsByTagName，即使你有一個回傳一個串列（陣列），而不是一個單一的元素a的anchor恒定值將與長度為1的陣列。
要么通過 ID 使用 querySelector 要么選擇第一項document.getElementsByTagName("a")[0]-> 不是真正的最佳實踐。
或者，如果您有多個錨標記，只需回圈遍歷它們
見下文
const body = document.body
const anchor = document.querySelectorAll("a.jayden");
const darkModeToggle = document.getElementById('darkModeToggle');
function getValue() {
if (darkModeToggle.checked) {
body.classList.remove("lightmode")
anchor.forEach(a => a.classList.remove("lightmode"))
console.log("checked")
} else {
console.log("not checked")
body.classList.add("lightmode")
anchor.forEach(a => a.classList.add("lightmode"))
}
};.lightmode {
background:blue
}
a.lightmode {
color: white
}<input onclick="getValue()" id="darkModeToggle" type="checkbox" checked />
<a class="jayden" href="#" >jayden.hu</a>
<a class="jayden" href="#" >jayden.hu</a>uj5u.com熱心網友回復：
Anchor 是一個 HTML 集合，應該回圈遍歷：
const body = document.body;
const anchor = document.getElementsByTagName('a');
const darkModeToggle = document.getElementById('darkModeToggle');
function getValue(){
if (darkModeToggle.checked) {
console.log("checked");
if(body.classList.contains("lightmode")){
body.classList.remove("lightmode")
}
for(var a=0;a<anchor.length;a ){
if(anchor[a].classList.contains("lightmode")){
anchor[a].classList.remove("lightmode");
}
}
} else{
console.log("not checked");
if(!body.classList.contains("lightmode")){
body.classList.add("lightmode")
}
for(var a=0;a<anchor.length;a ){
if(!anchor[a].classList.contains("lightmode")){
anchor[a].classList.add("lightmode");
}
}
}
} .lightmode{
background-color: white;
color: black;
}<body>
<div>
<ul>
<li><a href="kapcsolat/kapcsolat.html?version=691">Kapcsolat</a></li>
<li><a href="projects/projects.html?version=691">Projektek</a></li>
<li><a class="active" href="index.html?version=692">Kezd?lap</a></li>
<li><label class="switch"><input onclick="getValue()" id="darkModeToggle" type="checkbox" checked><span class="slider round"></span></label><script src="scripts/darkModeSwitch.js"></script>
</li>
<h1 class="jayden" style="float: left;"><a class="jayden" href="index.html?version=-23424893215">jayden.hu</a></h1>
</ul>
</div>
</body>uj5u.com熱心網友回復：
<input onclick="getValue()" id="darkModeToggle" type="checkbox" checked />
<a class="jayden" href="#" >jayden.hu</a>
<a class="jayden" href="#" >jayden.hu</a>
//Make sure the elements exist on page
const body = document.body
const anchors = document.getElementsByTagName('a');
const darkModeToggle = document.getElementById('darkModeToggle');
const getValue = () => {
body.classList.toggle('lightmode'); // adds or removes class
for (const anchor in anchors) {
anchor.classList.toggle('lightmode'); // adds or removes class
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385344.html
標籤：javascript html css 网络
上一篇：懸停時下拉選單不顯示列出的元素