Форум

polinin · #1 (**permalink**) 01.11.2017, 08:59

Есть пример:

for(var i = 0, h; i < 3; i++)
{
	h = document.createElement("button");
	h.innerHTML = "alert = " + i;
	h.onclick = function(){ alert(i); };
	document.body.appendChild(h);
}

Надо чтобы по клику кнопки в сообщении выдавалось значение переменной "i" на момент назначения обработчика клика (0, 1, 2), но все кнопки, естественно, выдают конечное значение "i", равное "3". Как решить такую задачу?

ruslan_mart · #2 (**permalink**) 01.11.2017, 09:02

Лучше функцию вынести отдельно, чтобы не создавать каждый раз новую.

var onClick = function(i) {
    alert(i);
};

for(var i = 0, h; i < 3; i++)
{
	h = document.createElement("button");
	h.innerHTML = "alert = " + i;
	h.onclick = onClick.bind(h, i);
	document.body.appendChild(h);
}

ksa · #3 (**permalink**) 01.11.2017, 10:06

Сообщение от polinin

Как решить такую задачу?

Использовать замыкание...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<script type='text/javascript'>
for(var i = 0, h; i < 3; i++){
	h = document.createElement("button");
	h.innerHTML = "alert = " + i;
	h.onclick = (function (N){
		return function(){ alert(N); };
	})(i)
	document.body.appendChild(h);
};
</script>
</body>
</html>

polinin · #4 (**permalink**) 01.11.2017, 10:15

Сообщение от ruslan_mart

h.onclick = onClick.bind(h, i);

Про "bind" ничего не знал. Спасибо!

polinin · #5 (**permalink**) 01.11.2017, 10:22

Сообщение от ksa

Использовать замыкание...

Спасибо. Я знакомился с этим разделом JS, но, видимо, усвоил его слабо. Скажите, а если в моем примере будет не 3 кнопки, а 3000, как менее накладно реализовать решение, через bind или замыканием?

рони · #6 (**permalink**) 01.11.2017, 10:25

Сообщение от polinin

менее накладно реализовать решение,

повесить клик на родителя кнопок

рони · #7 (**permalink**) 01.11.2017, 10:28

polinin,
Делегирование событий

polinin · #8 (**permalink**) 01.11.2017, 10:37

Сообщение от рони

polinin,
Делегирование событий

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript