• 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

Object Storage Arubacloud
0 głosów
2,427 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 thryndl Nałogowiec (30,470 p.)

Na pewno dobrze ładujesz poszczególne fragmenty kodu? Wrzuciłem Twój kod na codepena i działa od strzała: https://codepen.io/thryndl/pen/RzBjyw

komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
Dobrze ładuję? Tzn? Po prostu zapisuję i odświeżam stronę
komentarz 4 lipca 2019 przez thryndl Nałogowiec (30,470 p.)
Chodzi o to czy masz dobrze podpięty CSS i JS.
komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
Mam wszystko w jednym pliku, tu js --> <script type="text/javascript"></script>
1
komentarz 4 lipca 2019 przez thryndl Nałogowiec (30,470 p.)
A gdzie masz tag script? W sekcji head czy tuż przed zamknięciem </body>?
komentarz 4 lipca 2019 przez Ebay_05 Początkujący (400 p.)
na końcu head
1
komentarz 4 lipca 2019 przez thryndl Nałogowiec (30,470 p.)
A wrzuć tuż przed zamknięciem </body> i zobacz co się stanie.
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,815 wizyt
pytanie zadane 12 lipca 2019 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)
0 głosów
2 odpowiedzi 5,215 wizyt
pytanie zadane 8 października 2019 w HTML i CSS przez lukasz290521 Obywatel (1,410 p.)
+1 głos
3 odpowiedzi 422 wizyt
pytanie zadane 8 lipca 2020 w JavaScript przez RysiekB Nowicjusz (130 p.)

92,584 zapytań

141,434 odpowiedzi

319,671 komentarzy

61,968 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...