dlaczego this.id == null w moim kodzie?

0

Uczę się java scripta i mam taki problem:
dlaczego przy wylwołąniu funkcji z elemetu html z parametrem id w kodzie javascript pole this.id zwraca nulla

html

<html>
<head>
	<title>SSUP!!</title>
	<script src="skrypt.js"></script>
</head>

<body>
	<h1 id="nr1" onclick="Say()">Nr 1!!</h1>
	<h1 id="nr2">Nr 2!!</h1>
	<h1 onclick=Say()>Nr 3!!</h1>
</body>

</html>

javascript

window.onload = initialize;

function initialize(){
	//document.getElementById("nr1").onclick=Say;
	document.getElementById("nr2").onclick=Say;
}

function Say(){
	try{
		if(this.id == null){
		throw new Error("wrong shit nigga");
		}
	switch(this.id){
	case "nr1":
		alert("Nr 1");
		break;
	case "nr2":
		alert("Nr 2");
		break;
	default:
		alert("wtf did u press");
	}
	}catch(error){
		alert(error.message);
		}
}

I z tym kodem w funkcji Say elemet z nr 1 ma id==null a elemet któremu przypisałem funkcją wartość onclik działą elegancko...

Ps. jak powinno się czytelnie wywoływać funckje w hatmlu: onclick=funkcja() czy onclick="funkcja()"

0

w ogóle nie powinno się używać atrybutu onclick.
http://www.quirksmode.org/js/events_advanced.html

1

Wprowadził Cię w błąd operator ==, z którego nie powinno się korzystać gdy nie zna się jego (skomplikowanego!) sposobu działania. Zamiast tego, korzystaj z ===.

this.id nie jest równe null. Warunek z operatorem == przeszedł, bo operator ten dokonuje koercji typów i dla niego undefined i null są równe.

Bo w rzeczywistości, this.id jest tu równe undefined. Tak naprawdę, Twoja funkcja Say() w przypadku pierwszego przycisku wywoływana jest jak zwykła funkcja, w kontekście globalnym. Innymi słowy, przy takim wywołaniu, wewnątrz funkcji Say, this wskazuje na obiekt globalny. Czyli na window. Obiekt ten nie ma własności o nazwie id, więc window.id zwraca undefined.

W JavaScripcie this nie jest związane na stałe z funkcją, tylko zależy od tego, w jaki sposób daną funkcję wywołamy.

Poczytaj sobie książkę "JavaScript -- Mocne strony" Douglasa Crockforda lub zobacz jakieś jego wykłady. Filmiki są dostępne w necie.

Tutaj masz też troszkę o tym:
http://doctrina.org/Javascript-Function-Invocation-Patterns.html

Nie znajdziesz tam jednak raczej przykładów z JavaScriptem zagnieżdżonym w HTML-u. Takie kodowanie uznawane jest za brzydkie i nieelastyczne, mieszające i uzależniające od siebie w bardzo mocny sposób warstwę struktury (HTML) i zachowania (JS).

To, co masz w punkcie 1 to odpowiednik czegoś takiego...

document.getElementById("nr1").onclick = function() {
  eval("Say();");
};

Co jest brzydkie, nieefektowne i niepotrzebne. Znacznie sensowniej użyć tego, co masz zakomentowane:

document.getElementById("nr1").onclick=Say;

Tutaj kontekst (this) będzie ustawiony na element nagłówka i this.id zadziała.

1 użytkowników online, w tym zalogowanych: 0, gości: 1