• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
117 wizyt
pytanie zadane 21 lipca 2021 w JavaScript przez Doge Gaduła (3,320 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,320 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

+3 głosów
odpowiedź 21 lipca 2021 przez Comandeer Guru (599,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.

+1 głos
odpowiedź 21 lipca 2021 przez VBService Ekspert (251,250 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? ]

Podobne pytania

0 głosów
2 odpowiedzi 466 wizyt
pytanie zadane 1 maja 2018 w JavaScript przez Zackerrr Początkujący (450 p.)
+1 głos
1 odpowiedź 206 wizyt
pytanie zadane 14 października 2021 w JavaScript przez Mruczekkk Nowicjusz (220 p.)
+3 głosów
1 odpowiedź 199 wizyt
pytanie zadane 5 listopada 2022 w Offtop przez VBService Ekspert (251,250 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...