html css js button onclick removing and adding class

Question

I know there are a lot of question similar but none have helped me so I'm here. I have a 9 button grid, if i click one it change color (orange) but if i click another one they both stay orange. i don't want it. i want that if a button is already orange, the new one get colored but the first one return to normal color. I tried in a lot of ways but i'm not so good at js and HTML so i'm not understanding where the problem is

function hide() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demo2")
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

function hide2() {
  var x = document.getElementById("demo2");
  var y = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

document.getElementById('sel').onclick = function() {

  var className = ' ' + sel.className + ' ';
  var a = document.getElementById('sel2');
  var b = document.getElementById('sel2');
  var c = document.getElementById('sel3');
  var d = document.getElementById('sel4');
  var e = document.getElementById('sel5');
  var f = document.getElementById('sel6');
  var g = document.getElementById('sel7');
  var h = document.getElementById('sel8');
  var i = document.getElementById('sel9');

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
    this.a = a.replace(' btn2 ', 'btn ')
    this.b = b.replace(' btn2 ', 'btn ')
    this.c = c.replace(' btn2 ', 'btn ')
    this.d = d.replace(' btn2 ', 'btn ')
    this.e = e.replace(' btn2 ', 'btn ')
    this.f = f.replace(' btn2 ', 'btn ')
    this.g = g.replace(' btn2 ', 'btn ')
    this.h = h.replace(' btn2 ', 'btn ')
    this.i = i.replace(' btn2 ', 'btn ')

  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}

document.getElementById('sel2').onclick = function() {

  var className = ' ' + sel2.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel3').onclick = function() {

  var className = ' ' + sel3.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel4').onclick = function() {

  var className = ' ' + sel4.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel5').onclick = function() {

  var className = ' ' + sel5.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel6').onclick = function() {

  var className = ' ' + sel6.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel7').onclick = function() {

  var className = ' ' + sel7.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel8').onclick = function() {

  var className = ' ' + sel8.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}
document.getElementById('sel9').onclick = function() {

  var className = ' ' + sel9.className + ' ';

  if (~className.indexOf(' btn ')) {
    this.className = className.replace(' btn ', 'btn2 ');
  } else {
    this.className = className.replace('btn2 ', 'btn ');
  }
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: white;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}





  
  
  
  Document






  
    
      
        Vuoi conoscere quali potrebbero 
 essere i costi della attività di logistica e 

          trasporto se affidassi i tuoi prodotti a 
 Gruppo Sinergia?
      
      
        Calcola il tuo preventivo!
      
      
         Tariffa di Gestione: comprende le tutte le attività di gestione del prodotto, le attività di gestione
 dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.
      
      
        Tariffa di Stoccaggio: rappresenta il valore del singolo prodotto per la conservazione presso la
 struttura di Gruppo Sinergia.
      
      
      
        TIPOLOGIA PRODOTTO
      


      
      
        
          
            
          
          
            
          
          
            
          
        
        
          
            
          
          
            
          
          
            
          
        
        
          
            
          
          
            
          
          
            
          
        
      


      
        DIMENSIONI PRODOTTO
      


      
        
          
            
          
        
        
          
            
          
        
      


      
        
          
            Inserisci le dimensioni per il singolo prodotto (cm)
          
          
            
            
            
          
        
      


      
        
          
             Busta 35x25x3
          
          
             Busta 39x31x5
          
          
             Scatola 27x16x10
          
        
        
          
             Scatola 24x15x17
          
          
             Scatola 37x28x8
          
          
             Scatola 44x30x9
          
        
        
          
             Scatola 61x46x40
          
          
             Scatola 51x36x12
          
          
             Scatola 59x38x32
          
        
      


      
        
          
             0-1 kg
          
          
             3-5 kg
          
        
        
          
             1-2 kg
          
          
             5-10 kg
          
        
        
          
             2-3 kg
          
        
      


      
        
          TARIFFA DI GESTIONE
        
        
          TARIFFA DI STOCCAGGIO
        
      

      
        
          € 4,56
        
        
          € 0,16 al mese
        
      

      
        
          
            € 3,12 spedizione ITALIA
          
          
            € 6,70 spedizione EUROPA
          
          
            € 6,70 spedizione WORLDWIDE* ZONA 6
          
        
        
      


      
        
          I valori sono calcolati con una media non superiore ai 10 ordini al giorni.
 Per progetti con movimentazioni maggiori sono previste tariffe migliorative.
 Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia
          di prodotti, contattaci!
        
      


      
        
          
            Nome e Cognome
          
          
            E-mail
          
          
            Telefono

Just to let everyone know, the function in js i'm trying to make to solve this is just on the first button (ID sel) and i've tried telling the code to replace the colored class with the uncolored one. I also know that it will look strange cause i have used 2 different ways to create a variable, but i found all the other function i used on stack overflow written like that (i just changed the ID name) but i don't know if there are differences on how i then added the other variables.

Nisanth Reddy · Accepted Answer

You can easily achieve this using the below steps

First, remove all code in your javascript regarding click listener.

Then, store a list of buttons using this

var buttons = document.querySelectorAll('.bottoneCategoria');

Then, add this function. Basically, this function will be called whenever one of your buttons is clicked.

function onButtonClick(event) {
    // Get the button on which user clicked using event.target
    let clickedButton = event.target;

    // Loop over all your buttons and replace the btn2 with btn
    // This means all buttons will now be normal
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].classList.replace('btn2', 'btn');
    }

    // Finally change your clicked button from btn to btn2
    // This will make your clicked button to orange while rest will be normall
    clickedButton.classList.replace('btn', 'btn2');
}

Finally, loop over all your buttons and attach the function you created in previous step to all the buttons.

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', onButtonClick);
}

Check the working code snippet for more details.

function hide() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demo2")
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

function hide2() {
  var x = document.getElementById("demo2");
  var y = document.getElementById("demo");
  if (x.style.display === "none") {
    x.style.display = "inline-flex";
  } else {
    x.style.display = "inline-flex";
  }
  if (y.style.display === "inline-flex") {
    y.style.display = "none"
  }
}

var buttons = document.querySelectorAll('.bottoneCategoria');

function onButtonClick(event) {
  let clickedButton = event.target;
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].classList.replace('btn2', 'btn');
  }
  clickedButton.classList.replace('btn', 'btn2');
}

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', onButtonClick);
}

body {
  font-family: "Open Sans", sans-serif;
  background-color: white;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify {
  justify-content: center;
}

.align {
  align-items: center;
}

.evenly {
  justify-content: space-evenly;
}

.between {
  justify-content: space-between;
}

.border {
  border: 1px solid black;
}

.m-0 {
  margin: 0;
}

.spacer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.orange {
  color: orange;
}

.bold {
  font-weight: bold;
}

.bg {
  background-color: whitesmoke;
}

.tabtitle {
  font-weight: bold;
}

.tariffe {
  font-size: small;
}

.intro {
  text-align: center;
}

.tartitle {
  font-size: medium;
}

div h2 {
  font-size: xx-large;
}

.cont {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  margin-top: 12px;
  cursor: pointer;
}

.m-7 {
  margin-top: 7px;
}

.m-14 {
  margin: 14px;
  padding: 0px;
}

div input {
  border-radius: 3px;
  border: solid 1px black;
}

div input:focus {
  outline: none;
}

.richiedi {
  text-align: center;
  padding: 5px 50px;
}

.tabcosti {
  background-color: darkorange;
  border: solid darkorange 1px;
}

.border {
  border: solid darkorange 1px;
}

.black {
  color: black;
}

.white {
  color: white;
}

.m-left-50 {
  margin-left: 200px;
}

.x-small {
  font-size: x-small;
}

.tabcosti2 {
  border-top: 0px;
  border: solid darkorange 1px;
}

.margin-left {
  margin-left: 20px;
}

.info {
  width: 215px;
  height: 20px;
}

.info2 {
  width: 75px;
  height: 20px;
  margin: 10px;
}

.small {
  font-size: small;
}

.unbtn {
  border: 0px;
  width: 20vw;
  height: 30px;
  background-color: whitesmoke;
}

.unbtn:focus {
  outline: none;
  background-color: darkorange;
  color: white;
}

.hide {
  display: none;
}

.btn {
  background-color: whitesmoke;
  border-radius: 3px;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}





  
  
  
  Document






  
    
      
        Vuoi conoscere quali potrebbero 
 essere i costi della attività di logistica e 

          trasporto se affidassi i tuoi prodotti a 
 Gruppo Sinergia?
      
      
        Calcola il tuo preventivo!
      
      
         Tariffa di Gestione: comprende le tutte le attività di gestione del prodotto, le attività di gestione
 dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.
      
      
        Tariffa di Stoccaggio: rappresenta il valore del singolo prodotto per la conservazione presso la
 struttura di Gruppo Sinergia.
      
      
      
        TIPOLOGIA PRODOTTO
      


      
      
        
          
            
          
          
            
          
          
            
          
        
        
          
            
          
          
            
          
          
            
          
        
        
          
            
          
          
            
          
          
            
          
        
      


      
        DIMENSIONI PRODOTTO
      


      
        
          
            
          
        
        
          
            
          
        
      


      
        
          
            Inserisci le dimensioni per il singolo prodotto (cm)
          
          
            
            
            
          
        
      


      
        
          
             Busta 35x25x3
          
          
             Busta 39x31x5
          
          
             Scatola 27x16x10
          
        
        
          
             Scatola 24x15x17
          
          
             Scatola 37x28x8
          
          
             Scatola 44x30x9
          
        
        
          
             Scatola 61x46x40
          
          
             Scatola 51x36x12
          
          
             Scatola 59x38x32
          
        
      


      
        
          
             0-1 kg
          
          
             3-5 kg
          
        
        
          
             1-2 kg
          
          
             5-10 kg
          
        
        
          
             2-3 kg
          
        
      


      
        
          TARIFFA DI GESTIONE
        
        
          TARIFFA DI STOCCAGGIO
        
      

      
        
          € 4,56
        
        
          € 0,16 al mese
        
      

      
        
          
            € 3,12 spedizione ITALIA
          
          
            € 6,70 spedizione EUROPA
          
          
            € 6,70 spedizione WORLDWIDE* ZONA 6
          
        
        
      


      
        
          I valori sono calcolati con una media non superiore ai 10 ordini al giorni.
 Per progetti con movimentazioni maggiori sono previste tariffe migliorative.
 Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia
          di prodotti, contattaci!
        
      


      
        
          
            Nome e Cognome
          
          
            E-mail
          
          
            Telefono

html css js button onclick removing and adding class

Answers (1)

Related Questions