Klikanie na diva zmiana kolorów

Question

Jak wykonać podmianę kolorów klikając na diva? W sposób, taki że ładuje się domyślny kolor biały, jak kliknę na diva to zmienia kolor np.na czarny , a jak kliknę jeszcze raz to z powrotem na biały? 

Na razie mam tyle zrobione ale chyba ten onclick to nie bardzo się nadaje , chyba że się mylę , proszę o pomoc z tym . Kod dotychczasowy: 

function ta()
{
var element = document.getElementById('abc');
 
element.style.color = 'black';

if (element.style.color == 'black'&& ......?) /* Tutaj problem */
{
element.style.color = 'white';
}
}
  
<div class="sw" id="abc" onclick="ta()" style="bottom:617px; left:125px;"><i class="flaticon-eee"></i>1</div>

 

Answer 1

https://jsfiddle.net/Chriss92/015ykyn3/

Tylko nie wiem jak to zrobić bez użycia !important w CSS.

Comments

Proszę, skrócony kod: https://jsfiddle.net/Chriss92/pa4rktnk/1/

W sumie, to ciekawy task dałeś :)

P.S. Tam, w 12 linijce JS, zrób potrójny znak === (przeoczyłem)

return eve.target.id === 'abc' + iterator;

 

---

Przecież to nie działa. Klikałeś w ten zielony kwadracik wewnątrz co mi przesłałeś ?

Wgrałem do siebie i nie działa jak trzeba . Działa tylko na ostatnim elemencie nie na wszystkich.

---

Teraz lepiej? https://jsfiddle.net/Chriss92/pa4rktnk/3/

---

Prawie dobrze. Chyba Ci nie powiedziałem, ale class name = swiatlo jest  dla pierwszych 6 id. a class name = gnd jest dla kolejnych 8 elementów . Trzeba by inaczej to podłapać i by było już na ukończeniu to zadanie .

Zobacz: 

<div name="a0"  id="abc0" class="swiatlo"  style="bottom:617px; left:125px;" ><i name="imie0" class="flaticon-eee"></i></div>
					
					<div id="abc1" class="swiatlo" style="bottom:390px; left:105px;"><i name="imie1"  class="flaticon-eee"></i></div>
					
					<div id="abc2" class="swiatlo" style="bottom:255px; left:333px;"><i name="imie2"  class="flaticon-eee"></i></div>
					
					<div id="abc3" class="swiatlo" style="bottom:604px; left:623px;"><i name="imie3"  class="flaticon-eee"></i></div>
					
					<div id="abc4" class="swiatlo" style="bottom:830px; left:690px;"><i name="imie4"  class="flaticon-eee"></i></div>
					
					<div id="abc5" class="swiatlo" style="bottom:560px; left:720px;"><i name="imie5"  class="flaticon-eee"></i></div>
																						
		
		
					<div id="abc6" class="gnd" style="bottom:1123px; left:220px;"><i name="imie6"class="flaticon-ttt"></i></div>
					 
					<div id="abc7" class="gnd" style="bottom:1061px; left:100px;"><i name="imie7"class="flaticon-ttt"></i></div>
					
					<div id="abc8" class="gnd" style="bottom:1040px; left:218px;";><i name="imie8"class="flaticon-ttt"></i></div>
					
					<div id="abc9" class="gnd" style="bottom:988px; left:215px;";><i name="imie9"class="flaticon-ttt"></i></div>
					
			<div id= "abc10" class="gnd" style="bottom:1422px; left:450px;"><i name="imie10"class="flaticon-ttt"></i></div>
					
			<div id="abc11" class="gnd" style="bottom:1203px; left:950px;"><i name="imie11"  class="flaticon-ttt"></i></div>
					
			<div id="abc12" class="gnd" style="bottom:1004px; left:620px;"><i name="imie12" class="flaticon-ttt"></i></div>
					
			<div id="abc13" class="gnd" style="bottom:1256px; left:945px;"><i name="imie13" class="flaticon-ttt"></i></div>

 

---

To spróbuj sobie zmodyfikować mój skrypt pod siebie. Jak coś nie wiesz, to pytaj.

Answer 2

Zobacz, czy o to Tobie chodziło:

<script>
function ta()
{
var element = document.getElementById('abc');
  if(element.style.color != 'black') {
element.style.color = 'black';
 }
if (element.style.color = 'black')
{
element.style.color = 'white';
}
}
   </script>
<div class="sw" id="abc" onclick="ta()" style="bottom:617px; left:125px;"><i class="flaticon-eee"></i>1</div>

 

Comments

Próbowałem wcześniej właśnie na tej zasadzie zrobić zmianę koloru , lecz nie chciało mi to działać. Tobie ten kod działa ?