How to pass triggering element in addEventListener?

Question

I have this code:

window.onload = function(){ 
var player=0;
for(var i="0";i<"9";i++)
    document.getElementById(i).addEventListener("click",function(){oxfunc(document.getElementById(i))});
function oxfunc(s){
    s.innerHTML="!";    
}

The IDs of elements are numbered 0 to 8. I want to know which element was clicked. The above code is giving an error:

tictactoe.js:8 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at oxfunc (tictactoe.js:8)
    at HTMLTableCellElement.<anonymous> (tictactoe.js:5)
oxfunc @ tictactoe.js:8
(anonymous) @ tictactoe.js:5

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

The triggering element will be this in the function, so you don't need to use your approach.

addEventListener("load", function() {
  var player = 0;
  for (var i = 0; i < 9; i++) {
    document.getElementById(i).addEventListener("click", function() {
      oxfunc(this);
    });
  }

  function oxfunc(s) {
    s.innerHTML = "!";
  }
});

If you want to use your approach, then see JavaScript closure inside loops – simple practical example.

edited May 23 '17 at 11:53

Community

1
1

answered Dec 21 '16 at 19:33

Quentin

914,110
126
1,211
1,335

Thank you! 'this' points to the element triggering the event? I also need to know the number. How can I achieve that? – Utkarsh Barsaiyan Dec 21 '16 at 19:42
@UtkarshBarsaiyan `this.id` will be the "id" attribute value. – Pointy Dec 21 '16 at 20:01

How to pass triggering element in addEventListener?

1 Answers1