0

var slide = document.getElementById("slider");

slide.onclick = function() { 
  alert(this.value)
}
<input type="range" id="slider" name="slider">

Using onclick works.

  var slide = document.getElementById("slider");

    slide.oninput = function() { 
      alert(this.value)
    }



  
 <input type="range" id="slider" name="slider">

Using oninput works.

var slide = document.getElementById("slider");


  function thistest() { 
    alert(this.value)
  }
  
slide.addEventListener("input", thistest, false);
<input type="range" id="slider" name="slider">

Using a separate function with eventlistener works.

However...

var slide = document.getElementById("slider");

  slide.addEventListener("input", ()=> { 
  alert(this.value)
   }
  );
<input type="range" id="slider" name="slider">

Using anonymous function on eventlistener, it returns undefined.

According to MDN, this on eventlisterner, should return the value of the element on which it's placed. But that's not what happens. Why?

happy_story
  • 1
  • 1
  • 7
  • 17

2 Answers2

3

There is a difference between anonymous functions (function(...) { ... }) and arrow functions ((...) => { ... }) -- arrow functions actually don't bind this when called. So in your example, just try replacing ()=> with function().

Jan Pokorný
  • 1,418
  • 15
  • 22
  • Why don't they bind `this` when called? – happy_story Mar 07 '21 at 14:26
  • @definitelynotme It's on purpose, since the "old" behavior of `this` was confusing. (You could argue that having two different behaviors is more confusing, but that's how they decided to do it...) Learn more here: https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 – Jan Pokorný Mar 07 '21 at 14:35
  • So what does `this` refer to when used in an arrow function? – happy_story Mar 07 '21 at 14:38
  • @definitelynotme `this` is just a regular variable (that sometimes gets conveniently bound for you), so it works like any other variable: if there's a variable `this` in the outer scope, it refers to it. Otherwise, it is `undefined`. – Jan Pokorný Mar 07 '21 at 14:43
  • I see, but when I try to define a variable `this`, it gives me an error. So, how can `this` even be defined as a variable in the first place? – happy_story Mar 07 '21 at 14:51
  • @definitelynotme It gets defined automatically when a (non-arrow) `function` is called using the syntax `a.b(...)` -- in this case, `this` inside `b` will be equal to `a`. This was useful in the days when prototype inheritance was the only way of creating objects in JS. It did create many confusing situations, though: i.e. `var fn = a.b; fn()` will not have `this` bound in `b`. Nowadays we have `class` and arrow functions and you can safely use those. – Jan Pokorný Mar 07 '21 at 18:01
  • @definitelynotme Also, in your example, you can use `slide.addEventListener("input", (e)=>{ alert(e.currentTarget.value)});` instead of relying on `this`. – Jan Pokorný Mar 07 '21 at 18:03
  • `this` inside `b` will be equal to `a`, but will `this` outside the function be still equal to `a`? If not, then again, how can `this` ever be defined as a global variable for it to referred to inside an arrow function? I've heard `currentTarget`, but I just realized I don't know how it works, and now I have to remind myself. Man, how long did it took you to learn all of this? I feel like I don't know anything. There' so much. – happy_story Mar 07 '21 at 23:54
  • @definitelynotme `this` works similarly to a local variable, it's only available in the scope of the specific function. If that function's body contains an arrow function, that arrow function can access the outer `this` (like any other closured variable). – Jan Pokorný Mar 08 '21 at 00:14
0

you are using this Keyword inside arrow function, then this keyword will point to one level up it will not point to the same level.

This is why you are getting undefined value.

Pawan Deore
  • 162
  • 3
  • 10