Do I want the buttons to change color when I click on them?

Question

I want that when I click on the buttons it changes color. This is for a slider, the error is that it does not change color when I click, the only thing that changes is the image and I have tried several ways but it has not worked. I put the color in the css but it still does not work.

I have checked all the css but it doesn't look like the error is there where I think the error is is in the HTML and JavaScript.

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; padding: 40px; background-color: rgb(255, 255, 255); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; } .container{ margin-top: 10px; height: 28.65rem; width: 50.4rem; margin-left: 10px; position: relative; } .slider{ display: none; } .slider img{ border-radius: 10px; width: 50rem; height: 420px; position: relative; } .elements{ text-align: center; } .quadrate{ margin-top: 0.70rem; cursor: pointer; height: 15px; width: 15px; border-radius: 100%; display: inline-block; transition: backgraund-color 0.6s ease; background-color: rgb(0, 0, 0); } .active{ background-color: red; } .contenedor{ border-radius: 15px; width: 51.40rem; height: 30rem; position: relative; background-color: rgb(255, 255, 255); }

 let sliderIndex = 1; showSlides(sliderIndex); function pluSlides(n) { showSlides(sliderIndex += n) } function currentSlide(n) { showSlides(sliderIndex = n) } function showSlides(n) { let i; let slider = document.querySelectorAll(".slider"); let quadrates = document.querySelectorAll("quadrate "); if (n > slider.length) sliderIndex = 1 if (n < 1) sliderIndex = sliderIndex.length for (i = 0; i < slider.length; i++) { slider[i].style.display = "none"; } for (i = 0; i < quadrates.length; i++) { quadrates[i].className = quadrates[i].className.replace(" active", "") } slider[sliderIndex - 1].style.display = "block"; quadrates[sliderIndex - 1].className += "active"; }

 <section class="contenedor"> <div class="container"> <div class="slider"> <img src="imaganes/imagen_1.jpg" alt="imagen-1"> </div> <div class="slider"> <img src="imaganes/imagen_2.jpg"> </div> <div class="slider"> <img src="imaganes/imagen_3.jpg"> </div> <div class="elements"> <span class="quadrate active" onclick="currentSlide(1)"></span> <span class="quadrate" onclick="currentSlide(2)"></span> <span class="quadrate" onclick="currentSlide(3)"></span> </div> </div> </section> <script src="home.js"></script>

Answer 1

You code has 2 issues:

The following lines of code needs to have a space or else the className gets concatenated to quadrateactive instead of being quadrate active . You can fix that by changing the following lines of code:

From:

slider[sliderIndex - 1].style.display = "block";
quadrates[sliderIndex - 1].className += "active";

To:

slider[sliderIndex - 1].style.display = " block";
quadrates[sliderIndex - 1].className += " active";

Secondly, the query selector for selecting quadrates should be:
let quadrates = document.querySelectorAll(".quadrate");

Instead of :
let quadrates = document.querySelectorAll("quadrate ");

 let sliderIndex = 1; showSlides(sliderIndex); function pluSlides(n) { showSlides(sliderIndex += n) } function currentSlide(n) { showSlides(sliderIndex = n) } function showSlides(n) { let i; let slider = document.querySelectorAll(".slider"); let quadrates = document.querySelectorAll(".quadrate"); if (n > slider.length) sliderIndex = 1 if (n < 1) sliderIndex = sliderIndex.length for (i = 0; i < slider.length; i++) { slider[i].style.display = "none"; } for (i = 0; i < quadrates.length; i++) { quadrates[i].className = quadrates[i].className.replace(" active", "") } slider[sliderIndex - 1].style.display = " block"; quadrates[sliderIndex - 1].className += " active"; }

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; padding: 40px; background-color: rgb(255, 255, 255); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; } .container{ margin-top: 10px; height: 28.65rem; width: 50.4rem; margin-left: 10px; position: relative; } .slider{ display: none; } .slider img{ border-radius: 10px; width: 50rem; height: 420px; position: relative; } .elements{ text-align: center; } .quadrate{ margin-top: 0.70rem; cursor: pointer; height: 15px; width: 15px; border-radius: 100%; display: inline-block; transition: backgraund-color 0.6s ease; background-color: rgb(0, 0, 0); } .active{ background-color: red; } .contenedor{ border-radius: 15px; width: 51.40rem; height: 30rem; position: relative; background-color: rgb(255, 255, 255); }

 <section class="contenedor"> <div class="container"> <div class="slider"> <img src="https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+Buyers+GuideC/O%20https://placeholder.com/" alt="imagen-1"> </div> <div class="slider"> <img src="https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingTwoThis.com+Buyers+GuideC/O%20https://placeholder.com/"> </div> <div class="slider"> <img src="https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThisThree.com+Buyers+GuideC/O%20https://placeholder.com/"> </div> <div class="elements"> <span class="quadrate active" onclick="currentSlide(1)"></span> <span class="quadrate" onclick="currentSlide(2)"></span> <span class="quadrate" onclick="currentSlide(3)"></span> </div> </div> </section>