javascript window.onload style

Question

Witam, mam problem :

Za pomocą js (window.onload = function())  nadałem różne kolory tła wszystkim komórkom tabeli zależnie od ich zawartości. Potem za pomocą onclick na przycisku uruchamiam inną funkcję która powinna zmieniać kolor danych komórek na inny. Kolor nie zmienia się. Zauważyłem że funkcja z onclick może ustawić kolor ale nie może go zmienić po ustawieniu go przez funkcję z onload. Poniżej cały (według mnie) potrzebny kod. Pytanie to czemu tak się dzieje i jak sprawić by funkcja wywołana przez onclick działała poprawnie.

function funkcja()
{for(var i = 3; i < 20; ++i)
	{
		for(var j = 0; j <=2; ++j)
		{
	
			var list = document.getElementsByTagName("TR")[i];
					  
			var x = list.getElementsByTagName("TD")[j].innerHTML;
			
			if(przeslanaWartosc  == x) 
			{
			document.getElementsByTagName("tr")[i].style.backgroundColor = "green";	
			}
		}
	}

}

window.onload = function()
{			
		for(var i = 3; i < 20; ++i)
			{
				for(var j = 0; j < 25; ++j)
				{
					var list = document.getElementsByTagName("TR")[i];
					
					var x = list.getElementsByTagName("TD")[j].innerHTML;
					
					if(x <= 18) list.getElementsByTagName("TD")[j].style.backgroundColor = "lightblue";
					if(18<x && 25>x) list.getElementsByTagName("TD")[j].style.backgroundColor = "#00FF00";
					if(24<x && 30>x) list.getElementsByTagName("TD")[j].style.backgroundColor = "yellow";
					if(30<=x && 39>=x) list.getElementsByTagName("TD")[j].style.backgroundColor = "orange";
					if(40<=x && 42>=x) list.getElementsByTagName("TD")[j].style.backgroundColor = "red";
				}
			}
}

  

Answer 1

1. Warto zacząć stosować addEventListener zamiast onload in onclick

2. Kiedy pobierasz na początku nie musisz tworzyć 2 pętli choć jest to jakieś rozwiązanie. Lepiej może by było pobrać wszystkie komórki TD i dla nich wykonać pętlę w której zmienisz ich kolor w zależności od wartości w niej.

3. Nazwa funkcji funkcja nie jest zbyt ciekawa ;)

4. W celu zmiany kliknięcia na daną komórkę wykorzystaj Event delegation czyli dodaj event dla całej tabeli a potem w funkcji sprawdź czy kliknąłeś w komórkę i zmień jej kolor.

 

Comments

Dzięki za radę, skorzystam z niej ale nadal nie wiem czemu występuje problem który opisałem. Nie chcę tak po prostu odrzucać jednej metody bo "podobno inna jest lepsza"

---

Ale to nie działa przez to że wybrałeś coś innego tylko zrobiłeś źle :D. Jeżeli funkcja funkcja jest odpalana po kliknięciu na daną komórkę to

1. Druga pętla for jest mniejsza niż ta która wypełnia komórki na początku.

2. Na początku wybierasz cały rząd wstawiasz do zmiennej list, potem do zmiennej x wstawiasz wartość jaka jest w komórce,.

No i to kolejny problem nie wiadomo co to jest ta przesłana wartość. No i potem jeżeli jest równe wybierasz jeden rząd i nadajesz mu kolor. strasznie jest tutaj wszystko namieszane. Chociażby zmienna list powinna być zadeklarowana przed 2 pętlą bo w przeciwnym razie na początku z 20 wymaganych razy zmieniasz ją 500 razy.

"podobno inna jest lepsza"

Ok twój wybór ale lepiej zacząć stosować od początku rozwiązania które są poprawne. Jeżeli będziesz robił coś więcej to im wcześniej zaczniesz korzystać z poprawnych rozwiązań tym lepiej. Jak dla mniej mniej nauki to tylko plus.