Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как вставить в аргумент функции текущее значение переменной? (https://javascript.ru/forum/misc/71190-kak-vstavit-v-argument-funkcii-tekushhee-znachenie-peremennojj.html)

polinin 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 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 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 01.11.2017 10:15
Цитата:
Сообщение от ruslan_mart (Сообщение 468782)
h.onclick = onClick.bind(h, i);

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

polinin 01.11.2017 10:22
Цитата:
Сообщение от ksa (Сообщение 468784)
Использовать замыкание...
Спасибо. Я знакомился с этим разделом JS, но, видимо, усвоил его слабо. Скажите, а если в моем примере будет не 3 кнопки, а 3000, как менее накладно реализовать решение, через bind или замыканием?

рони 01.11.2017 10:25
Цитата:
Сообщение от polinin
менее накладно реализовать решение,
повесить клик на родителя кнопок

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

polinin 01.11.2017 10:37
Цитата:
Сообщение от рони (Сообщение 468788)
Спасибо.


Часовой пояс GMT +3, время: 07:22.