javascript切换类中的错误

error in javascript toggle class

本文关键字：错误 javascript      更新时间：2023-09-26

我有这段代码，用于使用我在网上找到的纯JavaScript切换类，当我在离线网站上使用它时，它不起作用我的代码是-

<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
<style type="text/css">
.class1 {
    color: #f00;
}
.class2 {
    color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>

任何帮助都将不胜感激

将脚本移动到源代码中要查找的div下面。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.class1 {
    color: #f00;
}
.class2 {
    color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
    this.classList.toggle('class1');
    this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>

在dom准备就绪之前，您无法对其进行操作。

因此，要么加载在body标记末尾添加处理程序的脚本，要么使用DOMContentLoaded事件。

document.addEventListener("DOMContentLoaded", function(event) {
   console.log("DOM fully loaded and parsed");
});

尝试在div呈现后添加事件处理程序，例如在onload事件中

实时演示

<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
  if (!this.classList) return; // no support
  this.classList.toggle('class1');
  this.classList.toggle('class2');
}
window.onload=function() {
  document.getElementById('div').onclick=classToggle;
}
</script>
<style type="text/css">
.class1 {
    color: #f00;
}
.class2 {
    color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>

codepen演示

//vanilla js -- toggle active class 
// el = object containing the elements to toggle active class and the parent  element 
var el = {
  one: document.getElementById('one'),
  two: document.getElementById('two'),
  three: document.getElementById('three'),
  hold: document.getElementById('hold')
};
 // func = object containing the logic 
 var func = {
     toggleActive: function(ele) {
     ele = event.target;
     var hold = el.hold.children;
     var huh = el.hold.children.length;
     var hasActive = ele.classList.contains('active');
     for (i = 0; i < huh; i++) {
         if (hold[i].classList.contains('active')) {
            hold[i].classList.remove('active');
         }  
     }
     if (!hasActive) {
         ele.classList.add('active');
     }
   }
 };
 //add listeners when the window loads 
 window.onload = function() {
    var holdLen = el.hold.children.length;
    for (i = 0; i < holdLen; i++) {
        el.hold.children[i].addEventListener("click", func.toggleActive);
    }
 };
相关文章：