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

May 21, 2022

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>

>Solution :

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>