• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Klikanie na diva zmiana kolorów

+1 głos
2,722 wizyt
pytanie zadane 2 marca 2016 w JavaScript przez daniel89 Użytkownik (700 p.)

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>

 

2 odpowiedzi

+2 głosów
odpowiedź 2 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 2 marca 2016 przez daniel89
 
Najlepsza

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

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

komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)

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;

 

komentarz 7 marca 2016 przez daniel89 Użytkownik (700 p.)
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.
komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
komentarz 7 marca 2016 przez daniel89 Użytkownik (700 p.)

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>

 

komentarz 7 marca 2016 przez ScriptyChris Mędrzec (190,190 p.)
To spróbuj sobie zmodyfikować mój skrypt pod siebie. Jak coś nie wiesz, to pytaj.
0 głosów
odpowiedź 2 marca 2016 przez Rubeus024 Obywatel (1,680 p.)

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>

 

komentarz 2 marca 2016 przez daniel89 Użytkownik (700 p.)
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 ?

Podobne pytania

0 głosów
1 odpowiedź 442 wizyt
pytanie zadane 19 stycznia 2018 w JavaScript przez SzukającyPrzygód Bywalec (2,310 p.)
0 głosów
1 odpowiedź 164 wizyt
pytanie zadane 27 czerwca 2019 w JavaScript przez Apper97 Obywatel (1,380 p.)
0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 6 marca 2017 w JavaScript przez ShadoWs Bywalec (2,800 p.)

93,425 zapytań

142,421 odpowiedzi

322,646 komentarzy

62,785 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...