Why is the button changing its color only once when using a classList

1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="event1.css">
</head>
<body>
    <button class="click">Click Event</button>
   <script src = "event1.js"></script> 
</body>
</html>

//CSS
.color{
    background-color: rgb(67, 200, 22);
    font-weight: bold;
}
.normal{
    background-color: white;
    font-weight: normal;
}
// Js

const btn = document.querySelector(".click");
btn.addEventListener('mouseover',function(){
    btn.classList.toggle("color");
})
btn.addEventListener('mouseout',function(){
    btn.classList.toggle("normal");
})
2

This is your CSS:

.color{
    background-color: rgb(67, 200, 22);
    font-weight: bold;
}
.normal{
    background-color: white;
    font-weight: normal;
}

This is your JS:

const btn = document.querySelector(".click");

btn.addEventListener('mouseover',function(){
    btn.classList.toggle("color");
})
btn.addEventListener('mouseout',function(){
    btn.classList.toggle("normal");
})

Your button doesn’t change color only once. Just keep hovering the mouse in and out and you will see it change its color between 3 styles.

Why? Because you use toggle with 2 classes.

Let’s go step by step:

Form the start, your button will have the default style with the class list:

click

When you mouseover, the class list is:

click color

the button will have the style of .color (green)

When you mouseout, the class list is:

click color normal

the button will have the style of .normal (white)

When you mouseover the second time, the class list is:

click normal

the button will have the style of .normal (white) (doen’t change compare to the pevious step)

When you mouseout the second time, the class list is:

click

the button will have the default style.

For the code to work as your desire, you shoul use toggle with one class only.
For example:

const btn = document.querySelector(".click");

btn.addEventListener('mouseover',function(){
    btn.classList.toggle("color");
})
btn.addEventListener('mouseout',function(){
    btn.classList.toggle("color");
})
3

Thank you Toan for the explaination. For mouseout I want to add the default style instead of using a .normal class how do I code that

4

Hi @Gautham ,

The JS code I shared above is already switching between .color (green) and the default style:

  • mouseover: .color (green)
  • mouseout: default style

Honestly, I think using toggle() here is a bit confusing. You should use add() and remove() to add and remove class instead:

btn.addEventListener('mouseover',function(){
    btn.classList.add("color");
})
btn.addEventListener('mouseout',function(){
    btn.classList.remove("color");
})

And if what you meant is switching between .normal (white) and .color (green), and get rid of the default style, then do this:

  • Add class .normal to your button HTML to overwrite the default style:
<button class="click normal">Click Event</button>
  • When mouseover, add class color and remove class normal
  • When mouseout, add class normal and remove class color
btn.addEventListener('mouseover',function(){
    btn.classList.add("color");
    btn.classList.remove("normal");
})
btn.addEventListener('mouseout',function(){
    btn.classList.remove("color");
    btn.classList.add("normal");
})