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

[JS] Zmiana koloru tła po kliknięciu na diva

VPS Starter Arubacloud
0 głosów
2,513 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)

Dzień dobry!

Mam problem z dość łatwą rzeczą a morduję się z nią już od kilku godzin; mianowicie chciałabym, aby po kliknięciu na diva zmienił się kolor tła. Robię tak samo jak w poradnikach i odpowiedziach, ale naprawdę nic nie chce mi działać. W konsoli nic się nie pojawia, czysto.

JS:


    <script type="text/javascript">
        const orangeBtn = document.querySelector('.orange');

        orangeBtn.addEventListener('click', function(){
            document.body.className = "";
            document.body.className = "orange";
        })
        
    </script>

 

 

CSS i HTML w razie co:

<body>
    
    <div class="red"></div>
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="purple"></div>
    
</body>

    <style>
        body{
            background-color: #FFFDF0;
            text-align: center;
        }
        
        div{
            height: 50px;
            width: 90px;
            margin: 10px;
            display: inline-block;
            border: 1px solid black;
        }
        
        div:hover{
            cursor: pointer;
            height: 60px;
            width: 100px;
            margin: 5px;
        }
        
        .red{
           background-color: red;
        }
        
        .orange{
           background-color: orange;
        }
        
        .yellow{
           background-color: yellow;
        }
        
        .green{
           background-color: greenyellow;
        }
        
        .blue{
           background-color: deepskyblue;
        }
        
        .purple{
           background-color: purple;
        }
        
    </style>

 

1
komentarz 4 lipca 2019 przez pablop76 VIP (123,180 p.)

Zastanowiłbym się jeszcze czy nie użyć  classList zamiast className, ponieważ jeżeli Twoje body będzie miało więcej klas to className usuwa je wszystkie a classList tylko wybrane.

komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
ooo działa
komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
dziękuję bardzo <3
komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
To dlatego, że funkcja odwołuje się do klasy która nie została wcześniej zdefiniowana, prawda?
1
komentarz 4 lipca 2019 przez Chess Szeryf (76,710 p.)
Chciałem tylko przypomnieć niektórym, że odpowiedzi piszemy w odpowiedziach, a komentarze w komentarzach.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 1,915 wizyt
pytanie zadane 12 lipca 2019 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
0 głosów
2 odpowiedzi 5,334 wizyt
pytanie zadane 8 października 2019 w HTML i CSS przez lukasz290521 Obywatel (1,410 p.)
+1 głos
3 odpowiedzi 483 wizyt
pytanie zadane 8 lipca 2020 w JavaScript przez RysiekB Nowicjusz (130 p.)

92,765 zapytań

141,690 odpowiedzi

320,503 komentarzy

62,106 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...