Zmienianie divów- po kliknięciu zmienianie koloru, a po następnym kliknięciu powrót do stanu początkowego- jak zrobić?

pytanie zadane 3 lutego 2019 w JavaScript przez Marcin92 Nowicjusz (140 p.)

Dzień dobry,

Jestem osobą początkującą i chciałbym zmieniać kolory divów za pomocą kliknięcia w nie. A po następnym kliknięciu, aby resetowały się i zmieniały do stanu początkowego. Co można by było zmienić w poniższym kodzie, aby działał reset tych divów?

W dodatku chciałbym aby zliczało ile divów jest włączonych, czyli aby pojawiał się komunikat o tym, że w danym momencie jest włączonych np.: "dwa włączone";

html:


<div class="parent">
		<div class="child">Przycisk</div>
		<div class="child">Przycisk</div>
		<div class="child">Przycisk</div>
        <div class="child">Przycisk</div>
	</div>


JS:

var elements = document.getElementsByClassName("child");
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {

      this.classList.add("bak");
   };
}

		.parent {
			overflow: hidden;
			margin-top: 50px;
		}

		.child {
			width: 200px;
			height: 150px;
			float: left;
			margin-left: 20px;
			border: 1px solid #000;
			text-align: center;
			line-height: 150px;
			cursor: pointer;
			background-color: #ddd;
		}

		.bak {
			background-color: rgb(127, 216, 44);
			color: #fff;
			font-weight: bold;
		}

2 odpowiedzi

odpowiedź 3 lutego 2019 przez spamator12 Nałogowiec (28,230 p.)

zliczak klikniecia - parzyste/nieparzyste i na podstawie tego zmieniaj kolor (abys dobrze zrozumial - modulo)..

komentarz 3 lutego 2019 przez Marcin92 Nowicjusz (140 p.)

a przez "if" i "none" nie można tego zmieniać?

komentarz 3 lutego 2019 przez spamator12 Nałogowiec (28,230 p.)

Wydawalo mi sie, ze tresc postu byla inna - divy mialy zmieniac kolor z jednego na drugi.

W kazdym razie mozna nawet przez wartosc danego atrybutu (kolor).

komentarz 3 lutego 2019 przez Marcin92 Nowicjusz (140 p.)

Obecny kod zmienia kolor w divie, ale nie pozwala na to aby wrócić do pierwotnej wersji po ponownym kliknięciu na niego i nie zlicza aktywnych divów (włączonych kolorów)