How can I do actions when multiple divs are clicked ? (Javascript)

Question

I'll try to explain: I have a lot of divs that I am using as buttons (they're switching to red when you click on it). It's a ranking system (for a videogame). Each rank has three step (1-2-3). The goal of this is that you can select your rank first, then select the desire rank. After choosing this, the price is displayed. Im trying to do this function. For example, you select the lowest rank possible, then your landing (1-2-3). Then, you choose what is the rank that you want, so in total, there is 4 divs clicked. Finally, the goal of it all is to show the price. But im having troubles. If you guys have some ideas.

I know that this is not the good way to do it. The code below is an example (Silver 1 to Silver 2).

I'm sure that I can condense this but I don't know how (Because there is a lot of ranks and doing 50 functions is not a good idea I think). I hope to have been clear and precise, thanks for your help.

 //First part var fer1 = 0; var bronze1 = 0; var argent1 = 0; var or1 = 0; var platine1 = 0; var diamant1 = 0; var immortel1 = 0; var un1 = 0; var deux1 = 0; var trois1 = 0; //Second part var fer2 = 0; var bronze2 = 0; var argent2 = 0; var or2 = 0; var platine2 = 0; var diamant2 = 0; var immortel2 = 0; var un2 = 0; var deux2 = 0; var trois2 = 0; function P1() { fer1 = 1; bronze1 = 0; argent1 = 0; or1 = 0; platine1 = 0; diamant1 = 0; immortel1 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P8() { un1 = 1; deux1 = 0; trois1 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P11() { fer2 = 1; bronze2 = 0; argent2 = 0; or2 = 0; platine2 = 0; diamant2 = 0; immortel2 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } } function P99() { un2 = 0; deux2 = 1; trois2 = 0; if ((fer1 == 1 && fer2 == 1 && un1 == 1 && deux2 == 1)) { document.getElementById('total').innerHTML = "100€" } else { document.getElementById('total').innerHTML = "0€" } }

HTML:

 <div class="selection2"> <h1 class="unselectable policeOA policeRS" style="background-color:black; color:white;"> VOTRE RANG SOUHAITÉ</h1> <div class="SousSelection1"> <div class="contenu-grille"> <div class="foc"> <div class="PetitCarre customClass" id="pc11"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Silver.png"/> <img id="s1" class="unselectable slash1" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div> </div> <div class="foc"> <div class="PetitCarre" id="pc22"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Bronze.png"/> <img id="s2" class="unselectable slash2" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div> </div> <div class="foc"> <div class="PetitCarre" id="pc33"> <img class="rankss unselectable" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\Rank\Argent.png"/> <img id="s3" class="unselectable slash3" src="http://localhost:8080/fullvaloAZ\FullValoCreated\HTML\esports\build\assets\images\All\Slashwhite.png"/> </div>

Answer 1

I think you should give the divs the same class name the select them using querySelectorAll then create forEach loop on them add click event listener for them inside the event check for the current rank and div rank then return the required price also insted of using fer1 fer2 use [fer1,fer2] it would be much better. if you could provide the html maybe I could help more