A html button is unselecting on click

Question

I'd like to have the 9 button (3x3) to get a color change after getting clicked, so i used a .btn:focus class where I set a bg-color and a text color. the problem is the fact that if I click somewhere else (in the blank spot of the page or in the radio type input below) this color change disappears, but I need it to be there. It should disappear only if I click a different button of the same group of 9 but I don't know how to do it.

I tried with a JS function in the lower part of the HTML code that should add to my 9 buttons a class that should color them but that doesn't work. (I've just realised that even if this last JS function would work, my problem would be the fact that if I click a button that is not the one already selected I'd have 2 different button colored. I don't know how to solve my problem.)

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;
}

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

.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;
}

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

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="Normalize.css">
    <link rel="stylesheet" href="Style.css">
    <title>Document</title>
</head>


<body>
    

    <div class="container justify flex-row">
        <div class="flex-col">
            <div class="justify flex-row">
                <h1 class="intro">Vuoi conoscere quali potrebbero <br>
                    essere i <strong>costi</strong> 
                    della attività di <span class="orange">logistica</span> e <br>
                    <span class="orange">trasporto</span> se affidassi i tuoi prodotti a <br>
                    Gruppo Sinergia?</h1>
            </div>
            <div class="justify flex-row">
                <h2 class="orange">Calcola il tuo preventivo!</h2>
            </div>
            <div class="justify flex-row">
                <h3 class="tariffe"> <span class="bold tartitle">Tariffa di Gestione</span>: comprende le tutte le attività di gestione del prodotto, le attività di gestione<br>
                    dell’ordine, le attività di gestione del reso e il trasporto nazionale e internazionale.</h3>
            </div>             
            <div class="justify flex-row">
                <h3 class="tariffe"><span class="bold tartitle">Tariffa di Stoccaggio</span>: rappresenta il valore del singolo prodotto per la conservazione presso la<br>
                    struttura di Gruppo Sinergia.</h3>
            </div><!--^tariffe^-->
            <div class="justify flex-row">
                <p class="tabtitle">TIPOLOGIA PRODOTTO</p>
            </div>

            
            <!--Parte di codice con button-->
            <div class="justify evenly flex-row">
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel" class="btn bottoneCategoria">Abbigliamento e Scarpe</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel2" class="btn bottoneCategoria">Pet & Food</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel3" class="btn bottoneCategoria">Sport e Tempo libero</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel4" class="btn bottoneCategoria">Elettronica e Informatica</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel5" class="btn bottoneCategoria">Casa e Cucina</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel6" class="btn bottoneCategoria">Auto e Moto</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button id="sel7" class="btn bottoneCategoria">Food & Beverage</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel8" class="btn bottoneCategoria">Belleza e Salute</button>
                    </div>
                    <div class="flex-row">
                        <button id="sel9" class="btn bottoneCategoria">Altro</button>
                    </div>
                </div>
            </div>


            <div class="justify flex-row">
                <p class="tabtitle">DIMENSIONI PRODOTTO</p>
            </div>


            <div class="flex-row justify evenly">
                <div class="flex-col">
                    <div class="flex-row">
                        <button class="unbtn" onclick="hide()">Standard</button>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <button class="unbtn" onclick="hide2()">Fuori misura</button>
                    </div>
                </div>
            </div>


            <div id="demo2" class="justify m-30 evenly bg flex-row hide">
                <div class="flex-col">
                    <div class="flex-row">
                        <p>Inserisci le dimensioni per il singolo prodotto (cm)</p>
                    </div>
                    <div class="flex-row justify evenly">
                        <input class="small info2" type="text" placeholder="lunghezza">
                        <input class="small info2" type="text" placeholder="larghezza">
                        <input class="small info2" type="text" placeholder="altezza">
                    </div>
                </div>
            </div>


            <div id="demo" class="justify m-30 evenly flex-row bg hide">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 35x25x3" name="Scatola"> Busta 35x25x3
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Busta 39x31x5" name="Scatola"> Busta 39x31x5
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 27x16x10" name="Scatola"> Scatola 27x16x10
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 24x15x17" name="Scatola"> Scatola 24x15x17
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 37x28x8" name="Scatola"> Scatola 37x28x8
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 44x30x9" name="Scatola"> Scatola 44x30x9
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 61x46x40" name="Scatola"> Scatola 61x46x40
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 51x36x12" name="Scatola"> Scatola 51x36x12
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="Scatola 59x38x32" name="Scatola"> Scatola 59x38x32
                    </div>
                </div>
            </div>


            <div class="flex-row bg m-7 justify evenly">
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="0-1 kg" name="Peso"> 0-1 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="3-5 kg" name="Peso"> 3-5 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="1-2 kg" name="Peso"> 1-2 kg
                    </div>
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="5-10 kg" name="Peso"> 5-10 kg
                    </div>
                </div>
                <div class="flex-col">
                    <div class="align flex-row">
                        <input class="cont" type="radio" value="2-3 kg" name="Peso"> 2-3 kg
                    </div>
                </div>
            </div>


            <div class="justify evenly flex-row">
                <div class="flex-col">
                    <p>TARIFFA DI GESTIONE</p>
                </div>
                <div class="flex-col">
                    <p>TARIFFA DI STOCCAGGIO</p>
                </div>
            </div>

            <div class="tabcosti justify flex-row">
                <div class="flex-col">
                    <p>€ <span class="white">4,56</span></p>
                </div>
                <div class="flex-col">
                    <p class="m-left-50">€ <span class="white">0,16</span> <span class="x-small">al mese</span></p>
                </div>
            </div>

            <div class="flex-row tabcosti2">
                <div class="flex-col align">
                    <div class="flex-row">
                        <p>€ <span class="orange">3,12</span><span> spedizione</span> ITALIA</p>
                    </div>
                    <div class="flex-row">
                        <p>€ <span class="orange">6,70</span><span> spedizione</span> EUROPA</p>
                    </div>
                    <div class="flex-row">
                        <p class="margin-left">€ <span class="orange">6,70</span><span> spedizione</span> WORLDWIDE* ZONA 6</p>
                    </div>
                </div>
                <div class="flex-col spacer"></div>
            </div>

            
            <div class="flex-row justify intro">
                <p class="tariffe">
                    I valori sono calcolati con una media non superiore ai 10 ordini al giorni.<br>
                    Per progetti con movimentazioni maggiori sono previste tariffe migliorative.<br>
                    Se vuoi una quotazione ad hoc per iltuo modello di business e la tua tipologia<br>
                    di prodotti, contattaci!
                </p>
            </div>


            <div class="justify flex-row bg">
                <div class="flex-col">
                    <div class="flex-row">
                        <p>Nome e Cognome</p>
                    </div>
                    <div class="flex-row">
                        <p>E-mail</p>
                    </div>
                    <div class="flex-row">
                        <p>Telefono</p>
                    </div>
                </div>
                <div class="flex-col">
                    <div class="flex-row">
                        <input class="small info m-14" type="text">
                    </div>
                    <div class="flex-row">
                        <input class="small info m-14"type="text">
                    </div>
                    <div class="flex-row">
                        <input class="small info m-14"type="text">
                    </div>
                </div>
            </div>


            <div class="flex-row m-7 justify">
                <button class="richiedi">
                    Richiedi un preventivo
                </button>
            </div>

        </div>
    </div>


    <script>

        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 + ' ';

            if ( ~className.indexOf(' btn ') ) {
                this.className = className.replace(' btn ', 'btn2 ');
            } 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 ');
            }              
        }

        
    </script>


</body>

</html>

-------edited------- I've solved the first problem, now the fact is that if i click a button, and it change color, and then click another button, i'll have 2 colored button instead of one. I need a way to tell the code that if there's already a colored button, the new one will automatically remove the color to the first one.

It sounds like you're trying to create a set of [radio buttons](https://www.w3schools.com/tags/att_input_type_radio.asp). Using `onfocus` to save your selection sounds completely weird. Please share your source code. — r3mainer, May 12 '21 at 10:00
Welcome to StackOverflow! You need to create a minimal reproducible example and mention what you tried to sort the problem so that people can answer better. — Atheesh Thirumalairajan, May 12 '21 at 12:22
Aren't you just after this? [Toggle classname onclick JavaScript](https://stackoverflow.com/questions/14615712/toggle-classname-onclick-javascript) — isherwood, May 12 '21 at 13:59
@isherwood i just tried it (because yes it is what i'm trying to do) but it doesn't work. I only changed the Id name inside the bracket to match it with the id i placed on my button and it simply just make them all colored from the beggining (it shouldn't) and i cannot reverse the color change — Filippo Canino, May 12 '21 at 14:08
Part of your problem is that you're reusing IDs, which is invalid HTML. IDs that aren't unique _don't identify anything_. Use a common class and only act on that individual button, not all with that class name. — isherwood, May 12 '21 at 14:10
so how do i need to do it? i'm sorry but i'm not so good of a programmer, i do it for fun. i've understanded the fact that Id must not be the same in multiple element, but if i have to use the same function on all 9 button how can i do it differnetly? i need tho se different id for all 9 button and create the same js function 9 time but with different id relation? — Filippo Canino, May 12 '21 at 14:13

score 0 · Accepted Answer · answered May 12 '21 at 14:22

0

A simple approach would be to give each button a different id and assign an onclick() event to each which modifies the css of the one with specific id and deselects the others. More about click event listeners:https://www.w3schools.com/jsref/event_onclick.asp

answered May 12 '21 at 14:22

Ronit Raj

16
1
1

i've done it. but now the problem is another one. i'm placing edited html and js code in the question so you can see it, but the fact is that now, when i click a button it change color, but if i click another button, i'll have 2 colored button, but i need to have only one – Filippo Canino May 12 '21 at 14:49
In the function for every button click, add some code to deselect other buttons too. Suppose you want to highlight button with id sel1, unhighlight the buttons with ids sel2,sel3,....,sel9. There would surely be other efficient ways to do it but since you said you are new to it, this would be the easiest. – Ronit Raj May 12 '21 at 16:17
I thinked about doing in this way, but i don really know how. I think in every function for the sel1/2/3... Adding code where i say that it should removing the colored versione using something like className.replace, but i dont know if .replace actyally exist – Filippo Canino May 12 '21 at 16:29
Use classname.remove https://www.w3schools.com/howto/howto_js_remove_class.asp – Ronit Raj May 12 '21 at 16:35
I tried, i'm not getting it done. I don't understand logically how I should write the function down, i don't know if I can simply add another if to the old function....i don't know how to implement it. can you help me? – Filippo Canino May 13 '21 at 06:38

A html button is unselecting on click

1 Answers1