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

Jak zapętlić by zmianie na przemian ulegał kolor diva ?

0 głosów
179 wizyt
pytanie zadane 10 listopada 2017 w JavaScript, jQuery, AJAX przez DariuszH Gaduła (3,080 p.)

Jak zapętlić by zmianie na przemian ulegał kolor diva ? 


<!Doctype html>
<html>
    <head>
    <title>javascript exercises !</title>
    <meta charset="utf-8">
    <script type="text/javascript"></script>
    <link rel="stylesheet"  type="text/css">

</head>

<style>
    
body{
margin: 0;
width: 100%;


}


#header{
    margin: 0;
width: 100%;
height:7vh;
background-color: black;
background-size: 100% 100%; 


}

</style>


    <body>
        <div Id="header" onclick="change_click();"></div>

        


            
  

<script type="text/javascript">
    
function change_click(){

    var div = document.getElementById("header");
    

    if(div.style.backgroundColor="black"){
        div.style.backgroundColor="orange";
    }

    

  }


</script>


 </body>

</html>

3 odpowiedzi

0 głosów
odpowiedź 10 listopada 2017 przez xmentor Nałogowiec (49,900 p.)
wybrane 10 listopada 2017 przez DariuszH
 
Najlepsza

Właściwość style pobiera style inline-owe, których Twój element nie ma.

Dodatkowo w warunku przypisujesz a nie porównujesz.

Lepszym wyjściem będzie togglowanie klasy, która będzie odpowiednio ostylowana.

komentarz 10 listopada 2017 przez DariuszH Gaduła (3,080 p.)
Dziękuję za Informację :)
0 głosów
odpowiedź 10 listopada 2017 przez ProgramistaStepek Nałogowiec (27,260 p.)
Użyj do tego CSS
komentarz 10 listopada 2017 przez DariuszH Gaduła (3,080 p.)
Dziękuję za informację :)
0 głosów
odpowiedź 10 listopada 2017 przez Michał Nowak Początkujący (320 p.)

Po pierwsze div musi mieć styl inline, w przeciwnym przypadku przy pierwszym wywołaniu div.style.backgroundColor jest pusty.

Czyli:   <div id="header" onclick="change_click();" style="background:black"></div>

Po drugie:  

if(div.style.backgroundColor=="black")

a nie 

if(div.style.backgroundColor="black")

Po trzecie dodaj else.

Razem:

<!Doctype html> 
<html> 
    <head> 
    <title>javascript exercises !</title> 
    <meta charset="utf-8"> 
    <script type="text/javascript"></script> 
    <link rel="stylesheet"  type="text/css">

</head>

<style> 
     
body{ 
margin: 0; 
width: 100%;


}


#header{ 
    margin: 0; 
width: 100%; 
height:7vh; 
background-color: black; 
background-size: 100% 100%; 


}

</style>


    <body> 
        <div id="header" onclick="change_click();" style="background:black"></div>
<script type="text/javascript"> 
     
function change_click(){

    var div = document.getElementById("header"); 
    
    if(div.style.backgroundColor == "black"){ 
        div.style.backgroundColor="orange"; 
    }
	else
	{div.style.backgroundColor="black";}

    
  }


</script>


 </body>

 

komentarz 10 listopada 2017 przez DariuszH Gaduła (3,080 p.)
Dzięki ! Zamiast porównać przypisałem :) Łoł :)
komentarz 10 listopada 2017 przez Michał Nowak Początkujący (320 p.)

jeśli nie chcesz użyć stylu inline możesz użyć takiego warunku:
 

if(div.style.backgroundColor == "black" || getComputedStyle(div, null).getPropertyValue("background-color") == "rgb(0, 0, 0)")

 

komentarz 10 listopada 2017 przez DariuszH Gaduła (3,080 p.)
Chodzi o to, że się uczę Javyscriptu dopiero. Z tym paskiem to tylko ćwiczenie :)  Faktycznie, cofnąłem się do warunków if i  jest tam porównanie a nie przypisanie. Wartość może być równa, mniejsza bądź większa  :) W sumie dobrze myślałem, ale źle :) hehe

Podobne pytania

0 głosów
3 odpowiedzi 354 wizyt
pytanie zadane 29 czerwca 2015 w HTML i CSS przez Mavimix Mądrala (5,250 p.)
0 głosów
2 odpowiedzi 61 wizyt
0 głosów
1 odpowiedź 100 wizyt
pytanie zadane 23 stycznia 2016 w JavaScript, jQuery, AJAX przez daze6 Nowicjusz (140 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

67,128 zapytań

114,075 odpowiedzi

241,788 komentarzy

47,030 pasjonatów

Przeglądających: 196
Pasjonatów: 18 Gości: 178

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...