error in javascript toggle class

Question

I have this code for toggling class using pure JavaScript that I found online and it is not working when I am using it in an offline website my code is -

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

any help would be appreciated

kennebec · Accepted Answer · 2013-11-20 14:17:25Z

1

Move the script below the div you are looking for in the source code.

answered Nov 20, 2013 at 14:17

kennebec

105k32 gold badges109 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2906766 Over a year ago

thank you this worked! now i would like to add transition to it can you suggest any suitable though i know it will be a line code something of this sort - .something.style.cssText ="-webkit-transition:0.6s ease-in-out;";

vinay Maneti · Accepted Answer · 2013-11-20 14:21:22Z

0

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

answered Nov 20, 2013 at 14:21

vinay Maneti

1,4491 gold badge23 silver badges32 bronze badges

Comments

Tomas Klingen · Accepted Answer · 2013-11-20 14:26:49Z

0

You cannot manipulate the dom before it is ready.

So either load the script that adds the handler at the end of the body tag, or use the DOMContentLoaded event.

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

answered Nov 20, 2013 at 14:26

Tomas Klingen

1511 silver badge6 bronze badges

Comments

animuson · Accepted Answer · 2014-01-27 01:14:46Z

0

Try adding the event handler after the div has rendered - for example in the onload event

Live Demo

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

edited Jan 27, 2014 at 1:14

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Nov 20, 2013 at 14:20

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Comments

MCGRAW · Accepted Answer · 2015-09-05 05:21:19Z

codepen demo

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

 };

Collectives™ on Stack Overflow

error in javascript toggle class

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related