Using this to call other function in callback

Question

Hey guys I am trying to call a function inside a callback function with addEventListener

The code I am using is

<html>
  <body>
    <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
    </table>
    <script>
      function avis(n) {

          return n;
      }
      var c = document.getElementById('outside');
      function babe() {
          if(this.avis(c) == 'outside') {
              console.log('yuck');
          }
      }
      var el = document.getElementById("outside");
      el.addEventListener("click", babe,  false);
    </script>

This above code gives error like Uncaught TypeError: undefined is not a function.\

But when I use code like:

function babe() {
    if(this.id == 'outside') {
        console.log('yuck');
    }
}

It works fine ..

So my question is... is it possible to call another function with this.functionname() inside the callback?

Call function and assign to variable and use this variable into if condition — Amy, Nov 06 '14 at 12:03
`this` inside an event handler refers to an object on which event was raised. So with `.functionname()` you call its method. — SerG, Nov 06 '14 at 12:07
@SerG so you mean the this on event handler refers to the element which is clicked on ?? — lovemysql, Nov 06 '14 at 12:34
@SerG it would be really helpful if you post an answer as an example ..i would surely accept it ..can i use this.anyfunctionname() inside the eventhandler — lovemysql, Nov 06 '14 at 12:39
@SerG see i just want to call a function inside the callback with this.afunctionname() inside event handler ...is it possible ?? — lovemysql, Nov 06 '14 at 12:43
Why do you think you need call it like `this.afunctionname()`? And look [this](http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply) — SerG, Nov 06 '14 at 12:48

score 1 · Accepted Answer · answered Nov 06 '14 at 12:15

1

this.avis is not a function, avis is

      function avis(n) {

          return n;
      }
      var c = document.getElementById('outside');
      function babe() {
          if(avis(c).id == 'outside') {
              console.log('yuck');
          }
      }
      var el = document.getElementById("outside");
      el.addEventListener("click", babe,  false);

    <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
    </table>

Further note

This inside babe refers to the element id:outside which you created the event handler on. It is called by JavaScript in a element context (like apply does). But you don't need the avis function. Just check for this.id, unless you need avis to do something else

      var c = document.getElementById('outside');
      function babe() {
          if(this.id == 'outside') {
              console.log('yuck');
          }
      }
      var el = document.getElementById("outside");
      el.addEventListener("click", babe,  false);

    <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
    </table>

answered Nov 06 '14 at 12:15

yunzen

32,854
11
73
106

i know i can make the code run by using just function name like avis() //my question is can i use like this.anyfunctionname() in the callback ?? – lovemysql Nov 06 '14 at 12:25
can you tell me what this refers inside event handler ??..dos this refer to the element which is clicked – lovemysql Nov 06 '14 at 12:38
@saptamasree Yes it does – yunzen Nov 06 '14 at 12:38
@saptamasree `this` inside the event handlers callback function is the element, which is clicked on. `this.anyfunctionname` does not exist in this context. – yunzen Nov 06 '14 at 12:41
..thanx for your answer...actually can i use any function like this.afunctionname() inside event handler in any case ..if i can please edit ur ans with an example..it would be a lot helpful ..:) – lovemysql Nov 06 '14 at 12:42
wow exactly..in this case this represents the element which is called on ryt ?? – lovemysql Nov 06 '14 at 12:49
1

Ryt!! It is so as you say – yunzen Nov 06 '14 at 12:50
Think twice before extend DOM element. http://stackoverflow.com/questions/779880/in-javascript-can-you-extend-the-dom – SerG Nov 06 '14 at 13:00
@Serg I think you are right. But DOM element data is beyond the scope of this question. – yunzen Nov 07 '14 at 14:58

Using this to call other function in callback

1 Answers1

Further note