文章/答案/技术大牛

发布

社区首页 >问答首页 >classList.remove和.add由于某种原因不工作

问classList.remove和.add由于某种原因不工作
EN

Stack Overflow用户

提问于 2021-12-17 21:15:20

回答 5查看 5.8K关注 0票数 4

当切换开关时，我从浏览器控制台得到这些错误。由于某些原因，它不工作，我无法解决为什么这不能工作，我只是刚刚开始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)

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")
  }
};

.lightmode{
    background-color: white;
    color: black;
}

<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>

javascript

html

css

web

回答 5

Stack Overflow用户

发布于 2021-12-17 21:22:12

错误是因为您试图一次修改多个元素上的classList；您的anchor变量包含一个HTML (所有锚)的数组，而不是一个特定的元素。

谢天谢地，由于CSS级联，除了身体之外，您不需要更改任何元素上的类。只需在CSS中这样处理a元素，就可以继承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>

票数 0

Stack Overflow用户

发布于 2021-12-17 21:24:25

问题不在于身体，而在于anchor。您使用getElementsByTagName，它返回一个列表(数组)，而不是一个元素，即使您有一个a，anchor常量值也将是一个长度为1的数组。

要么使用querySelector，要么按ID选择第一个条目，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>

票数 0

Stack Overflow用户

发布于 2021-12-17 21:54:40

锚是一个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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70398971

复制

相似问题

问classList.remove和.add由于某种原因不工作
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问classList.remove和.add由于某种原因不工作EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问classList.remove和.add由于某种原因不工作
EN