Why this Javascript code does not work as expected?

Question

I am learning Javascript language and so I am on a project while I came across this issue. Here is the code:

function koko() {
  items = document.getElementsByTagName("a");
  for (var pos = 0; pos < items.length; pos++) {
    this.items[pos].addEventListener("click", function() {
      console.log(pos);
    });
  }
}

koko();

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <a href="#">Click me 1</a>
  <a href="#">Click me 2</a>
  <a href="#">Click me 3</a>
  </body>
</html>

Every time I click on any item with a tag I get same value on the console that is items.length. But I am expecting it to print the position/index of the element that is clicked. For example, if I click Click me 2 it should print 1. What am I missing here?

Related: [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Jonathan Lonowski, May 20 '17 at 23:58

score 0 · Answer 1 · answered May 20 '17 at 23:44

0

When the click listener is executed, pos has the value of 3, your code is fine, look at this example:

function koko() {
  items = document.getElementsByTagName("a");
  for (var pos = 0; pos < items.length; pos++) {
    this.items[pos].addEventListener("click", function() {
      console.log(this.innerHTML);
    });
  }
}

koko();

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <a href="#">Click me 1</a>
  <a href="#">Click me 2</a>
  <a href="#">Click me 3</a>
  </body>
</html>

answered May 20 '17 at 23:44

rbock

625
5
15

```When the click listener is executed, pos has the value of 3``` Can you please explain how is it happening? I mean pos is changing inside the for loop right? – ashwani May 20 '17 at 23:46
Yes it is, but javascript doesn't save the value that `pos` had when the function was declared. It gets the value of `pos` when the function is executed, and by that time your variable has already finished the for loop and has kept the value of 3. – rbock May 20 '17 at 23:48
This answer doesn't really fix the problem, as the OP wants to write the number "1", "2", or "3". Your answer writes "Click me " as well. – Luke Sheltraw May 20 '17 at 23:52
@LukeSheltraw you're right, I answered the question "What am I missing here", but didn't give a solution – rbock May 20 '17 at 23:54

score 0 · Answer 2 · answered May 20 '17 at 23:52

0

Try this for the desired results

function koko() {
  items = document.getElementsByTagName("a");
  for (var pos = 0; pos < items.length; pos++) {
    this.items[pos].id = pos;
    this.items[pos].addEventListener("click", function() {
      console.log(this.id);
    });
  }
}

koko();

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <a href="#">Click me 1</a>
  <a href="#">Click me 2</a>
  <a href="#">Click me 3</a>
  </body>
</html>

answered May 20 '17 at 23:52

pokeybit

1,032
11
18

Do note that ID values shouldn't be just numbers. Maybe use a data-attribute parameter instead for real world use – pokeybit May 20 '17 at 23:57
This helped me clear the confusion. Thanks :) – ashwani May 20 '17 at 23:59
Lmao, I wrote almost the same thing right as you posted this. – Luke Sheltraw May 21 '17 at 00:08
Posting code alone is not very useful. Your answer would be much more helpful to visitors if you explained the problem and your solution. – Felix Kling May 21 '17 at 00:30
@FelixKling I would have just have been repeating the comments from rbock's post before my answer he had already established that the value of `pos` wasn't being carried into the function. You are right however, I'll try to be more descriptive in future. – pokeybit May 21 '17 at 00:35

score 0 · Answer 3 · answered May 21 '17 at 00:07

You function logs pos, WHEN the button is clicked, not when the event listener is added. To fix this, you can use this code:

function koko() {
  items = document.getElementsByTagName("a");
  for (var pos = 0; pos < items.length; pos++) {
    this.items[pos].addEventListener("click", function() {console.log(this.id);});
 }
}

koko();

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
  <a href="#" id="1">Click me 1</a>
  <a href="#" id="2">Click me 2</a>
  <a href="#" id="3">Click me 3</a>
  </body>
</html>

The changes it makes from the original code: Added id to each link. The number in this is written to the screen. Changed Javascript to write the id of the link.

Why this Javascript code does not work as expected?

3 Answers3