Passing array[index] to function

Question

function setclass(element, classname) {
    console.log("event");
    console.log(element);
    element.classList.add(classname);   
    console.log(element.outerHTML);
}

var tpa = document.querySelectorAll("#topnav a");

for(var i=0; i<tpa.length; i++) {
    tpa[i].onclick = () => setclass(tpa[i], "current");
}

I don't understand why the element ins't passed to setclass via setclass(tpa[i],...). console.log(element) logs "undefined" and everything that follows fails because element is undefined.

On the other hand, this works as expected:

var tpa = document.querySelectorAll("#topnav a");
tpa[0].onclick= () => setclass(tpa[0], "current");

Jonas Wilms · Accepted Answer · 2017-05-25 13:45:45Z

2

for(var i=0; i<tpa.length; i++) {
  (i=> tpa[i].onclick = () => setclass(tpa[i], "current"))(i);
}

The onclick will happen after your loop has iterated.Therefore tpa[i] will point to the last element. You might bind i trough an IIFE like in the code above, or you use the context:

for(var i=0; i<tpa.length; i++) {
tpa[i].onclick = function(){ setclass(this, "current")};
}

edited May 25, 2017 at 13:45

answered May 25, 2017 at 13:43

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alessandrio · Accepted Answer · 2017-05-25 14:03:28Z

1

Bind creates a new function that will have this set to the first parameter passed to bind().

function setclass(element, classname, event) {
    console.log(event);
    console.log(element);
    element.classList.add(classname);   
    console.log(element.outerHTML);
}
var tpa = document.querySelectorAll("#topnav a");
var i,
    len = tpa.length;
for(i=0; i<len; i+=1) {
  tpa[i].onclick = setclass.bind(this, tpa[i], "current");
}

<div id="topnav">
  <a>sfdg</a>
  <a>sfdg</a>
  <a>sfdg</a>
  <a>sfdg</a>
  <a>sfdg</a>
  <a>sfdg</a>
</div>

edited May 25, 2017 at 14:03

answered May 25, 2017 at 13:45

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

1 Comment

Jonas Wilms Over a year ago

Yes. However you could prevent overriding the users function trough .bind(this,tpa[i],"current")

Collectives™ on Stack Overflow

Passing array[index] to function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related