getElementsByClassName nie działa

Question

Witam, co może powodować, że ten kod nie działa, skoro element o podanej klasie jest wewnątrz dokumentu, a konsola nie wyświetla żadnych błędów. Chodzi o to, że getElementsByClassName nie wkłada nic poprzez innerHTML do diva.

function czasMuzyka() {
	var teraz = new Date();
	var czasTeraz = (teraz.getHours() * 3600 + teraz.getMinutes() * 60 + teraz.getSeconds()) % 174;
	var pasek = czasTeraz * 100 / 174;
	
	if (czasTeraz < 7) document.getElementById("WidgetMiniPasek1").style.width = "4px";
	else document.getElementById("WidgetMiniPasek1").style.width = pasek + "px";
	
	var sekunda = czasTeraz % 60;
	var minuta = (czasTeraz - sekunda) / 60;
	
	if (sekunda < 10) sekunda = "0" + sekunda;
	
	document.getElementById("WidgetMiniTekst1").innerHTML = minuta + ":" + sekunda;
	
	pasek = czasTeraz * 274 / 174;
	
	if (czasTeraz < 7) document.getElementById("Wypełnienie1W").style.width = "10px";
	else document.getElementById("Wypełnienie1W").style.width = pasek + "px";
	
	document.getElementsByClassName("CzasW1").innerHTML = "<b>" + minuta + ":" + sekunda + "</b>";
	
	sekunda = (173 - czasTeraz) % 60;
	minuta = 2 - minuta;
	
	if (sekunda < 10) sekunda = "0" + sekunda;
	
	document.getElementsByClassName("CzasW2").innerHTML = "<b> -" + minuta + ":" + sekunda + "</b>";
	
	setTimeout("czasMuzyka()", 1000);
}

Answer 1

Ta metoda zwraca kolekcję elementów, nie pojedynczy element. Lepiej IMO użyć querySelector, który zwraca pierwszy element pasujący do selektora:

document.querySelector(".CzasW1").innerHTML= 'test';

Ogólnie polecam też korzystać z konsoli w przeglądarce, która pokazałaby takie błędy.

Comments

Napisałem, że właśnie konsola nie zwróciła żadnego błędu, a mi chodzi, aby zmienić zawartość dla wszystkich divów o podanej klasie

---

Napisałem, że właśnie konsola nie zwróciła żadnego błędu

Faktycznie, przegapiłem to, przepraszam.

mi chodzi, aby zmienić zawartość dla wszystkich divów o podanej klasie

W takim wypadku trzeba zastosować pętlę lub forEach(): https://jsfiddle.net/Comandeer/vsbzfqk5/ (zastosowałem tutaj też querySelectorAll(), które raczej jest preferowaną metodą zamiast getElementsByClassName()).

---

Super, zadziałało, dzięki wielkie!

---

@Comandeer, A czy byłaby możliwość, żeby edytować wybrany element, np jak w tym przypadku pierwszy, tak choćby drugi czy trzeci?

---

To, co zwraca querySelectorAll(), można traktować jak tablicę, więc jak chcesz zmodyfikować drugi element, to musisz się dobrać do zwroconeElementy[ 1 ].

---

A czy mógłbyś pokazać, jak to wygląda, gdybym przykładowo chciał dostać się do 3 elementu z klasą o nazwie choćby klasa?

---

const elements = document.querySelectorAll( '.klasa' );

elements[ 2 ].innerHTML = 'Jestem trzecim elementem.';