How to make a toggle on several elements?-CodePudding

I have in my beacon <div >

another beacon <p ></p>

which is intended to be incremented to find out if the user likes (clicks) it or decrements it if the user likes (clicks) it.

for this reason I use a boolean to check the condition

in my js I have a function that its charge of the fact

but as I apply this function to multiple tag recovers in my code they all act on the same boolean and value that causes me problem.

I would like each of them to be independent

const cerle = document.getElementsByClassName('cerle')
const compteur = document.getElementsByClassName('compteur')

let onOff =  false;
let nbr =  0;

function compte (i) {

  if (onOff == false) {

    nbr  
    console.log( nbr);

    onOff= true;
    console.log( onOff);

    compteur[i].innerHTML=`${nbr}k`

  }else if(onOff == true){

    nbr--
    console.log( nbr);

    onOff= false;
    console.log( onOff);

    compteur[i].innerHTML=`${nbr}k`

  }

}

for (let i = 0; i < cerle.length; i  ) {

  cerle[i].addEventListener("click",()=>{

    compte (i);

});

}

  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
  }

  .contain{
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 400px;
  background-color: yellowgreen;
}

.post{
  margin-left: 30px;
  width: 30%;
  height: 70%;
  background-color: rgb(73, 50, 205);
}

.cerle{
  width: 20%;
  height: 30%;
  border-radius: 50%;
  background-color: rgb(205, 35, 35);
}

<body>
    <div >
        <div >
            <div ></div>
            <p ></p>
        </div>

        <div >
            <div ></div>
            <p ></p>
        </div>

        <div >
            <div ></div>
            <p ></p>
        </div>

    </div>

</body>

CodePudding user response：

well here I was able to solve my problem and thank you to everyone who kindly helped me

I went through creating a new object for the assigned to each recovered div only the js file changed.

Here's my code.

const cerle = document.querySelectorAll(".cerle");
const compteur = document.getElementsByClassName('compteur');

let etat =  false;

var valeurDesPoste = new Array();


class compte {
constructor(onOff, valeur ,i) {

    this.onOff = onOff;
    this.valeur = valeur;
    this.i = i;  

}

 teste() {    
    
    if (this.onOff == false) {

        this.valeur   ;
        console.log( this.valeur);
    
        this.onOff= true;
        console.log( this.onOff);

        compteur[this.i].innerHTML=`${this.valeur}k`
    
      }else if(this.onOff == true){
    
        this.valeur-- ;
        console.log( this.valeur);
    
        this.onOff= false;
        console.log( this.onOff);

        compteur[this.i].innerHTML=`${this.valeur}k`
    
      }   
    
  }

 }


for (let i = 0; i < cerle.length; i  ) { 

 valeurDesPoste.push(50 *i);
// console.log( valeurDesPoste[i]);

let a =new compte(etat, valeurDesPoste[i] ,i);

cerle[i].addEventListener("click",()=>{
   
    a.teste()

 });

}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
 }

.contain{
  align-items: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 400px;
  background-color: yellowgreen;
 }

.post{
   margin-left: 30px;
   width: 30%;
   height: 70%;
   background-color: rgb(73, 50, 205);
 }

 .cerle{
   width: 20%;
   height: 30%;
   border-radius: 50%;
   background-color: rgb(205, 35, 35);
 }

<div >
    <div >
        <div ></div>
        <p ></p>
    </div>

    <div >
        <div ></div>
        <p ></p>
    </div>

    <div >
        <div ></div>
        <p ></p>
    </div>
    
</div>