passing "this" to a function JS

Question

My teacher gave use some code to work with and she told us not to touch the following as she has not taught it to us yet:

for ( i = 0; i < matrixOne.length; i++) {
document.getElementsByTagName("td")[i].addEventListener("click", function() {
    cellClicked(this);
});

where matrix one is defined as:

var matrixOne = document.getElementsByTagName("td");

I need to make the cellClicked() function work and I do not understand what this is referring to when it is being passed as the parameter cellClicked(this);.

Without knowing what this represents I can not complete the cellClicked function as I do not now what is being passed. Can someone please explain how the keyword this works here, i.e. how it's context is defined?

For future reference: This was solved, this was referring to getElementsByTagName("td")[i] and would be passed through if the cell was clicked on from the event listener.

Instead of a `for` loop you can iterate over the collection. `document.getElementsByTagName("td").forEach(function() { })` — zfrisch, Jun 19 '20 at 19:37
[this binding in event handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handlers_parameters_this_binding_and_the_return_value) is the way it works. You can also pass event as a parameter, and reference [event.target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) to get the target dom node. It's not really clear to me what you are asking, or what the problem is. — user120242, Jun 19 '20 at 21:11
You say you don't understand what `this` is referring to, but in the very next sentence, you say (correctly) that it is the cell. I'm really not sure what you are trying to ask here. — Quentin, Jun 19 '20 at 21:13
@zfrisch You should give the answer a stab then, if you can understand what OP's specific issue is. I don't mean this sarcastically: sometimes certain people have a better insight into what people are really trying to ask, and it makes sense for them to provide an answer. (IMO even if it means being downvoted into oblivion). You should also edit the OP's question to make it better. — user120242, Jun 19 '20 at 21:19

Kjartan · Answer 1 · 2020-06-19T21:35:28.477

I'm no expert on this (pun intended), but I believe the this keyword will point to whichever context it (or the function containing it) was created in.

In your case, that will mean that the context is the result of the code:

document.getElementsByTagName("td")[i]

...because that is the context to which your function is added.

The result: There will be an anonymous function added to each TD element, and each of these will be defined with a different call to cellClicked(this), and for each of these, the this will point to the specific TD it was created in.

Edit: Just to make it more explicit and clear, imagine you replaced the contents of your loop with the following:

var currentTd = document.getElementsByTagName("td")[i];

currentTd.addEventListener("click", function() {
    cellClicked(this);
});

That might make it easier to realize two things:

That the td element (currentTd) is the context to which the function is added.
..and that as a result, the value of this will differ for each iteration of the loop.

Yes, you are correct for this example. Thanks for taking the time to answer it so clearly. — James_B, Jun 20 '20 at 04:49

score 0 · Answer 2 · answered Jun 19 '20 at 21:27

Hope this helps, btw I don't know what code You had earlier but, in general better put for(var i = 0...z maybe you forgot var or you had i earlier

Here you can see exactly what this means and on which element your cellClicked() is referred, run the code :)

const matrixOne = document.getElementsByTagName("td");

for (var i = 0; i < matrixOne.length; i++) {
document.getElementsByTagName("td")[i].addEventListener("click", function() {
    console.log(this);
});
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
  
</table>

passing "this" to a function JS

2 Answers2