zmiana diva po kliknięciu

Question

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!

Answer 1

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];

 

 

Comments

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?

---

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.

---

Udało się.
Wystarczyło zamienić zmienną 'zmiana' na this.

Dzięki!

---

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!

Answer 2

Nie masz średnika gdzie definiujesz zmienną.

Answer 3

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