javascript toggle not working whenclicked but css works when a button is hovered over

user_19589947 0
Viewed 23

I want a button to display some text when clicked. the button is changing color when i hover over it but its not displaying text when clicked here tis the css and javascript.

css:

button {
  background-color: #f2c33c;
  font-size: 20px;
  color: #000000;
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #808080
}

button:hover {
  background-color: #7cc272;
  color: #333333;
}
.hidden {
  display: none;
}
.showing {
  display: block;
  font-family: Arial, sans-serif;
  background-color: #509fcb;
  color: #000000;
  width: 400px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}

js:

document.querySelector(".clickme").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle(".showing");
  });
});
javascript
1 Answers

You dont need to specify the . on the class that your toggeling.

So your code would look like this:

document.querySelector(".clickme").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle("showing");
  });
});
user_25515910
Related