Кнопка HTML CSS JS OnClick Удаление и добавление класса ⇐ Html

[Anonymous]

Я знаю, что есть много вопросов, похожих, но ни один из них не помог мне, поэтому я здесь.
У меня есть 9 -кнопочная сетка, если я нажму один, он измените цвет (оранжевый), но если я нажму другой, они оба остаются оранжевыми. Я не хочу этого. Я хочу, чтобы, если кнопка уже оранжевая, новая стала цветной, но первая вернется к нормальному цвету. Я пробовал во многих отношениях, но я не очень хорош в JS и HTML, поэтому я не понимаю, где проблема < /p>


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 ');
}
}< /code>
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;
}< /code>







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





Abbigliamento e Scarpe

Pet & Food

Sport e Tempo libero




Elettronica e Informatica

Casa e Cucina

Auto e Moto




Food & Beverage

Belleza e Salute

Altro




DIMENSIONI PRODOTTO



Standard




Fuori misura






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














Richiedi un preventivo







< /code>
< /div>
< /div>
< /p>
Просто чтобы все знали, функция в JS, которую я пытаюсь сделать, чтобы решить, что это только на первой кнопке (id sel), и я попытался сказать код, чтобы заменить окрашенный класс с помощью неоражаемого. переполнение стека написано так (я только что изменил имя идентификатора), но я не знаю, есть ли различия в том, как я затем добавил другие переменные.

Подробнее здесь: https://stackoverflow.com/questions/675 ... ding-class