I have just been experimenting with JavaScript and was trying this code.
var elements = document.getElementsByTagName("p");
var n = elements.length; // Should be: 10
for (var i = 0; i < n; i++) {
elements[i].onclick = function () {
console.log("This is element #" + i);
};
}<p>Element: #1</p>
<p>Element: #2</p>
<p>Element: #3</p>
<p>Element: #4</p>
<p>Element: #5</p>However, when the code is run, something weird occurs. Basically, for example, if you click on element #1, it will say that you've clicked on element #5.
This is what I am curious to know:
change for var to let:
for (let i = 0; i < n; i++) {
elements[i].onclick = function () {
console.log("This is element #" + i);
};
}
You can use the code below to correct the issues.
var elements = document.getElementsByTagName("p");
var n = elements.length;
function makeHandler(num) {
return function() {
console.log("This is element #" + num);
};
};
for (var i = 0; i < n; i++) {
elements[i].onclick = makeHandler(i + 1);
}
Let's explain the code.
Basically, in this code, makeHandler is immediately executed each time we pass through the loop, each time receiving the then-current value of i + 1 and binding it to a scoped num variable.
The outer function (makeHandler) returns the inner function (anonymous function) (which also uses this scoped num variable) and the element’s onclick is set to that inner function.
This ensures that each onclick receives and uses the proper i value (by the scoped num variable).