为什么这个javascript代码不能按预期工作?

时间:2017-05-20 23:36:09

标签: javascript html javascript-events event-handling

我正在学习javascript语言,所以当我遇到这个问题时,我正处于一个项目中。这是代码。

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>

每次点击a标记的任何项目时,我都会在控制台items.length上获得相同的值。但我希望它能打印出被点击的元素的位置/索引。例如,如果我点击Click me 2,则应打印1。我在这里缺少什么?

3 个答案:

答案 0 :(得分:0)

执行点击监听器时,pos的值为3,您的代码没问题,请看这个例子:

&#13;
&#13;
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();
&#13;
<!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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试此操作以获得所需的结果

&#13;
&#13;
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();
&#13;
<!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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

在单击按钮时,您可以运行日志pos,而不是在添加事件侦听器时。要解决此问题,您可以使用以下代码:

&#13;
&#13;
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();
&#13;
<!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>
&#13;
&#13;
&#13;

它从原始代码所做的更改: 为每个链接添加了id。其中的数字写入屏幕。 更改了Javascript以编写链接的id