• Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

112
Views
Input elements having the same value with 'for' loop

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:

  1. Why is this occurring?
  2. Is there a fix for it?
9 months ago · Juan Pablo Isaza
2 answers
Answer question

0

change for var to let:

for (let i = 0; i < n; i++) {
  elements[i].onclick = function () {
    console.log("This is element #" + i);
  };
}
9 months ago · Juan Pablo Isaza Report

0

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).

9 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.