i z for() przy przypisywaniu do funkcji zawsze jest równe 10

pytanie zadane 21 lipca 2021 w JavaScript przez Doge Gaduła (3,370 p.)

Witam, mam następujący kod:

window.onload = addEvent;
function addEvent()
{
	for(i=0;i<=9;i++)
	{
		var div = document.getElementById(`button${i}`);
		div.addEventListener("click", function() 
		{
			var text = document.createTextNode(i);
			console.log(i);
			document.getElementById("output").appendChild(text);
		});
	}
}

i wszystko działa poza tym, że zmienna i jest zawsze równa 10 dla console.log oraz createTextNode. Dlaczego tak się dzieje?

Mam również pytanie odnośnie kodu:

window.onload = addEvent;
function addEvent()
{
	for(i=0;i<=9;i++)
	{
		var div = document.getElementById(`button${i}`);
		div.addEventListener("click", button(i));
	}
}
function button(number)
{
	var text = document.createTextNode(number);
	switch(number)
	{
		case 0:
			console.log(number);
			break;
		case 1:
			console.log(number);
			break;
		case 2:
			console.log(number);
			break;
		case 3:
			console.log(number);
			break;
		case 4:
			console.log(number);
			break;
		case 5:
			console.log(number);
			break;
		case 6:
			console.log(number);
			break;
		case 7:
			console.log(number);
			break;
		case 8:
			console.log(number);
			break;
		case 9:
			console.log(number);
			break;
	}
	document.getElementById("output").appendChild(text);
}

w którym wszystko wywołuje się od razu, a na kliknięcie nie reaguje. Dlaczego tak się dzieje?

komentarz 21 lipca 2021 przez Doge Gaduła (3,370 p.)

całość kodu:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container" class="container">
		<div id="calculator" class="calculator">
			<div id="output" class="output"></div>
			<div id="buttons" class="buttons">
				<div id="buttonAC" class="buttonAC">
					AC
				</div>
				<div id="button1" class="button">
					1
				</div>
				<div id="button2" class="button">
					2
				</div>
				<div id="button3" class="button">
					3
				</div>
				<div id="button/" class="button_other" onclick="functional_button(1, '/')">
					/
				</div>
				<div id="button4" class="button">
					4
				</div>
				<div id="button5" class="button">
					5
				</div>
				<div id="button6" class="button">
					6
				</div>
				<div id="buttonx" class="button_other" onclick="functional_button(2, 'x')">
					x
				</div>
				<div id="button7" class="button">
					7
				</div>
				<div id="button8" class="button">
					8
				</div>
				<div id="button9" class="button">
					9
				</div>
				<div id="button-" class="button_other" onclick="functional_button(3, '-')">
					-
				</div>
				<div id="button=" class="button_other" onclick="functional_button(4, '=')">
					=
				</div>
				<div id="button0" class="button">
					0
				</div>
				<div id="button," class="button_other" onclick="functional_button(5, ',')">
					,
				</div>
				<div id="button+" class="button_other" onclick="functional_button(6, '+')">
					+
				</div>
			</div>
		</div>
	</div>
</body>
</html>

*
{
	margin: 0px;
	padding: 0px;
	user-select: none;
}
.container
{
	width: 100vw;
	height: 100vh;
	background-color: #969696;
	display: flex;
	align-items: center;
	justify-content: center;
}
.calculator
{
	width: 25%;
	height: 75%;
	background-color: #303030;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.output
{
	width: 90%;
	height: 10%;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: right;
	font-size: 40px;
}
.buttons
{
	width: 95%;
	height: 80%;
	font-size: 30px;
	background-color: blue;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.button
{
	height: 17%;
	width: 20%;
	margin: 5px;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
}
.button:hover
{
	background-color: gray;
	cursor: pointer;
}
.button_other
{
	height: 17%;
	width: 20%;
	margin: 5px;
	background-color: pink;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
}
.button_other:hover
{
	background-color: red;
	cursor: pointer;
}
.buttonAC
{
	height: 10%;
	width: 90%;
	margin: 5px;
	background-color: pink;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}
.buttonAC:hover
{
	background-color: red;
	cursor: pointer;
}

window.onload = addEvent;
var result = 0;
function addEvent()
{
	for(i=0;i<=9;i++)
	{
		var div = document.getElementById(`button${i}`);
		div.addEventListener("click", button(i));
	}
}
function functional_button(number, type)
{
	var text = document.createTextNode(type);
	switch(number)
	{
		case 1:
			console.log(number, type);
			break;
		case 2:
			console.log(number, type);
			break;
		case 3:
			console.log(number, type);
			break;
		case 4:
			console.log(number, type);
			break;
		case 5:
			console.log(number, type);
			break;
		case 6:
			console.log(number, type);
			break;
	}
	document.getElementById("output").appendChild(text);
}
function button(number)
{
	var text = document.createTextNode(number);
	switch(number)
	{
		case 0:
			console.log(number);
			break;
		case 1:
			console.log(number);
			break;
		case 2:
			console.log(number);
			break;
		case 3:
			console.log(number);
			break;
		case 4:
			console.log(number);
			break;
		case 5:
			console.log(number);
			break;
		case 6:
			console.log(number);
			break;
		case 7:
			console.log(number);
			break;
		case 8:
			console.log(number);
			break;
		case 9:
			console.log(number);
			break;
	}
	document.getElementById("output").appendChild(text);
}

2 odpowiedzi

odpowiedź 21 lipca 2021 przez Comandeer Guru (600,730 p.)

Bo zdarzenie się zawsze odbywa po tym, jak pętla już się wykonała. A po wykonaniu się pętli wartość zmiennej i jest równa tej z ostatniego przebiegu (10). Jest to spowodowane tym, jak zachowują się zmienne deklarowane przy pomocy var (lub niedeklarowane wgl, jak w tym przypadku; co jest praktyką niezalecaną, bo np. nie działa w strict mode).

Najprostsze rozwiązanie to zadeklarowanie zmiennej przy pomocy let. Drugim sposobem jest otoczenie ciała funkcji w IIFE – niemniej nie widzę powodu, by to robić, skoro dostawienie let jest wystarczające.

odpowiedź 21 lipca 2021 przez VBService Ekspert (252,660 p.)
edycja 21 lipca 2021 przez VBService

Możesz nie przypisywać w

. . .
div.addEventListener("click", button(i));
. . .

tylko samą referencję do funkcji (listener-a)

. . .
div.addEventListener("click", button);
. . .

a w funkcji zrobić taką zmianę np.

. . .
function button(e)
{
    // e.target zawiera informację, który przycisk został kliknięty
    // czytamy jego id i zamieniamy tekst w id  - "button" na pusty
    // łańcuch czyli usuwamy go a to co zostaje przypisujemy do
    // zmiennej number 
    // np.  id="button1" -> zostaje 1
    //      id="button2" -> zostaje 2 itd.
    //      id="button_cos" -> zostaje _cos itp.
    const number = e.target.id.replace('button','');
    var text = document.createTextNode(number);
. . .

[ In Javascript/jQuery what does (e) mean? ]