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

pytanie zadane 10 listopada 2017 w JavaScript przez DariuszH Gaduła (3,100 p.)

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

</head>

}

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

}

</style>

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

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

}

</script>

</body>

</html>

3 odpowiedzi

odpowiedź 10 listopada 2017 przez xmentor Nałogowiec (49,520 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,100 p.)

Dziękuję za Informację :)

odpowiedź 10 listopada 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Użyj do tego CSS

komentarz 10 listopada 2017 przez DariuszH Gaduła (3,100 p.)

Dziękuję za informację :)

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,100 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,100 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