Określanie zdarzeń w pętli

0

Witam!
Mam taki kod:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Dokument przykładowy</title>
	<script type="text/javascript">
		const ILOSC = 5;
		window.onload = function() {
			for(var i=1; i<=ILOSC; i++) {
				document.getElementById("p"+i).onclick = function() {
					alert("Kliknąłeś na akapit numer " + i);
				}
			}
		}
	</script>
</head>

<body>
	<div>
		<p id="p1">Akapit przykładowy 1</p>
		<p id="p2">Akapit przykładowy 2</p>
		<p id="p3">Akapit przykładowy 3</p>
		<p id="p4">Akapit przykładowy 4</p>
		<p id="p5">Akapit przykładowy 5</p>
	</div>
</body>
</html>
 

Dlaczego gdy kliknę na którykolwiek z akapitów, zawszę otrzymuję wiadomość: "Kliknąłeś na akapit numer 6"? Jak ustawić zdarzenia dla wielu elementów w pętli? Wiadomo, że mógłbym ustawić to tak:

 	<script type="text/javascript">
		const ILOSC = 5;
		window.onload = function() {
			document.getElementById("p"+1).onclick = function() {
				alert("Kliknąłeś na akapit numer " + 1);
			}
			document.getElementById("p"+2).onclick = function() {
				alert("Kliknąłeś na akapit numer " + 2);
			}
			document.getElementById("p"+3).onclick = function() {
				alert("Kliknąłeś na akapit numer " + 3);
			}
			document.getElementById("p"+4).onclick = function() {
				alert("Kliknąłeś na akapit numer " + 4);
			}
			document.getElementById("p"+5).onclick = function() {
				alert("Kliknąłeś na akapit numer " + 5);
			}
		}
	</script>

Ale dla przykładowo 50 akapitów, byłoby z tym strasznie dużo roboty.
Pomoże ktoś?

0

bo zmienna i jest globalna w kontekście stworzonej metody, a metody obsługi zdarzeń wykonują się nie w momencie ich definiowania, tylko faktycznego kliknięcia. a że w momencie kliknięcia i ma wartość 6, to chyba oczywiste?
musisz przechowywać identyfikator w kontrolce (np. jako część id) albo sprawdzać, którym dzieckiem rodzica jest kliknięty element. możesz też utworzyć tablicę zawierającą powiązanie kontrolka - odpowiadający jej numer i w funkcji obsługi onclick sprawdzać tą tablicę.

0

To klasyczny problem z domknięciami.

Wystarczy wydzielić ciało pętli for do osobnej funkcji, przyjmującej za parametr indeks pętli.

Najkrócej będzie użyć tzw. IIFE:

                window.onload = function() {
                        for(var i=1; i<=ILOSC; i++) {
                                (function(index) {
                                        document.getElementById("p"+index).onclick = function() {
                                                alert("Kliknąłeś na akapit numer " + index);
                                        };
                                }(i));
                        }
                }

(uwaga, pisane z palca, nie testowane -- zamysł na pewno dobry, ale może być jakaś literówa)

PS. Nawet standard ECMAScript 5 nie zawiera const (oprócz tego, że rezerwuje const jako słowo zastrzeżone -- na przyszłość). To rozszerzenie Mozilli. Co prawda nowsze wersje różnych przeglądarek to obsługują, ale często traktują const po prostu jako var. Natomiast IE włącznie z wersją 9 nie wspiera const w ogóle (i nie ma co psioczyć, skoro nie ma tego w standardzie ECMAScriptu).

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