Problem when traversing HTML elements with for loop

Question

Problem when traversing HTML elements with for loop

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a function in javascript like this:

 <script type="text/javascript">
   var lista = window.opener.document.getElementsByTagName("*");
   for (var i = 0; i < lista.length; i++) {
     lista[i].addEventListener ("click", function(){
     console.log ("Pulsó el control #" + i + ": " + this.nodeName + " /" + this.tagName);
    }
  );
 }
</script>

This function is in a window that runs through all the elements of its parent window to add an action dynamically. In this case, through the click event on the elements, I want a message that says

"I pressed the control #" + number of the item in the list + etc .

The message I get, however, is always with the same number "i" (in my case the 45). This is the output of the console:

Pulsó el control #45: TD /TD  fowl:34
Pulsó el control #45: TR /TR  fowl:34
Pulsó el control #45: TBODY /TBODY  fowl:34
Pulsó el control #45: TABLE /TABLE  fowl:34
Pulsó el control #45: CENTER /CENTER  fowl:34
Pulsó el control #45: BODY /BODY  fowl:34
Pulsó el control #45: HTML /HTML

If within the function I pass as parameter the "i" (lista[i].addEventListener ("click", function(i) ) , I get the following output:

Pulsó el control #[object MouseEvent]: CENTER /CENTER  fowl:34
Pulsó el control #[object MouseEvent]: BODY /BODY  fowl:34
Pulsó el control #[object MouseEvent]: HTML /HTML  fowl:34
Pulsó el control #[object MouseEvent]: BODY /BODY  fowl:34
Pulsó el control #[object MouseEvent]: HTML /HTML

1) What am I doing wrong? Why, if I do not pass parameters in the function, the variable "i" is always worth 45 which is the number of elements in the parent page, and if I pass the "i" as a parameter in the function, "MouseEvent" appears?

2) How do I navigate the loop well so that each element has its own index value of the loop?

javascript

asked by Luis 04.06.2017 в 22:32

source

2 answers

Error in ubuntu: read-only file system Redirect 301 drag the variable

score 0 · Answer 1

It is showing you the last value of i, you have to save it in the name or create an attribute to each element and then get it.

I edit according to your comment

 <script type="text/javascript">
      var lista = window.opener.document.getElementsByTagName("*");
        for (var i = 0; i < lista.length; i++) {
          lista[i].addEventListener ("click", function(){
            this.id=i;
            console.log ("Pulsó el control #" + this.id + ": " + this.nodeName + " /" + this.tagName);
            }
          );
        }
    </script>

I did not try it so it's likely that all id's are 45, I write it to give you a guide of what you have to do.

score 0 · Answer 2

Why, if I do not pass parameters in the function, the variable "i" always is it worth 45?

Because if the variables passed or used will be modified, its value will always be the last one, if it returns 45, there will almost certainly be that number of elements with said tag . Example

var id =2;
document.getElementById('micaja').addEventListener("click",function(){
  console.log(id);
});
var id =4;

<div id="micaja" style="background:#ccc;width:100px;height:20px">Opción</div>

And if I pass the "i" as a parameter in the function "MouseEvent" appears

The second parameter that is passed to the function addEventListener is a Listener , if this function is passed a parameter incorrectly as i will take it as a type of event as specified Aqui

How do I navigate the loop well so that each element has its own index value of the loop?

First we must bear in mind that an anonymous function can take the following form, with the () at the end we can pass the parameters to the function that will be executed.

(function (uno, dos) {
  console.log(uno+dos);
}(1, 2));

With this in mind, an option to pass the index of for (there may be simpler ones) , would be:

var items  = document.getElementsByClassName('caja');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click",function(idrecibido)
	{
	  return function() { console.log(idrecibido); }
	}(i),false);/* Ejecutar la Función enviando el parametro i */
}

.caja{
  width:100px;
  height:30px;
  background:#c33;
  margin:5px;
}

<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>