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

zmiana diva po kliknięciu

VPS Starter Arubacloud
0 głosów
1,358 wizyt
pytanie zadane 2 sierpnia 2018 w JavaScript przez agipacz Początkujący (460 p.)

Czesc, podpowie mi ktoś co robię nie tak ? 

HTML:

  <div class="wolneSiedzenia">1</div>

 

css:

.wolneSiedzenia {
    border-radius: 5px;
    width: 40px;
    height: 40px;
    background-color: #6B90F5;
    margin: 2px;
    color: #6B90F5; 

 

JS:


    
   var zmiana = document.getElementsByClassName("wolneSiedzenia")
   
   zmiana.onclick = function(){
  
  zmiana.style.backgroundColor="green";
  
}; 

 

nic się nie zmienia, po kliknięciu.

do tego edytorze wyświetla mi się komunikat: 'document' is not defined javascript

Z góry dzięki za odpowiedzi!

3 odpowiedzi

+2 głosów
odpowiedź 2 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)
wybrane 2 sierpnia 2018 przez agipacz
 
Najlepsza

Używając metody getElementsByClassName musisz wskazać konkretny element, w tym przypadku pierwszy (tutaj tworzy się tablica elementów, bo wiele elementów może mieć tą klasę), czyli :

var zmiana = document.getElementsByClassName("wolneSiedzenia")[0];

 

 

komentarz 2 sierpnia 2018 przez agipacz Początkujący (460 p.)
Dziękuję, teraz zadziałało.
Skoro trzeba użyć tablicy, to jak będzie to wyglądało w przypadku 40 elementów?
Wszystko trzeba wypisać między nawiasami kwadratowymi? a może zadziała to w wypadku tego querySelectorAll?
komentarz 2 sierpnia 2018 przez agipacz Początkujący (460 p.)

Udało mi się nasklejać coś takiego:

 

 var zmiana = document.getElementsByClassName("wolneSiedzenia"); 
  

for (var i=0; i < zmiana.length; i++) {
    zmiana[i].onclick = function(){
        zmiana.style.backgroundColor="red";
    }
};

ale też nie bardzo to działa.

komentarz 2 sierpnia 2018 przez agipacz Początkujący (460 p.)
Udało się.
Wystarczyło zamienić zmienną 'zmiana' na this.

Dzięki!
1
komentarz 2 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)
Na tym właśnie polega nauka, szukasz rozwiązania, ale zapewniam, że jak sam go znajdziesz to satysfakcja będzie olbrzymia.
W przypadku tych 40 elementów...próbuj, eksperymentuj i nie zrażaj się porażkami :)

Edit: Brawo!
0 głosów
odpowiedź 2 sierpnia 2018 przez OdsetekGlupoty Pasjonat (15,360 p.)
Nie masz średnika gdzie definiujesz zmienną.
0 głosów
odpowiedź 2 sierpnia 2018 przez bicnet Gaduła (4,800 p.)
Ja bym to zrobił:

const zmienna = document.querySelector('.wolneSiedzenia');

zmienna.addEventListener("click", ()=> {

   zmienna.style.backgroundColor ="green";

});

 

const to zmienna stała, addEventListener to nasłuchiwanie na parametr poddany tam czyli click, a ()=> to skrót od function

 

@edit : https://codepen.io/anon/pen/xJjWPj

Podobne pytania

0 głosów
0 odpowiedzi 2,379 wizyt
pytanie zadane 4 lipca 2019 w JavaScript przez Ebay_05 Początkujący (400 p.)
0 głosów
2 odpowiedzi 787 wizyt
pytanie zadane 21 marca 2017 w JavaScript przez Marcin90 Użytkownik (500 p.)
0 głosów
1 odpowiedź 362 wizyt
pytanie zadane 5 marca 2016 w JavaScript przez Protekton123 Użytkownik (700 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...