Javascript arrow function not working properly

Question

I have anonymous functions that I am trying to convert into arrow function. The code works fine with the anonymous functions, the text of the tag changes to update to the value of the slider and my functions setupGrid and clearGrid are called. However when I try to change it to arrow functions, the value of the tag shows undefined, and the setupGrid and clearGrid functions are not called.

Below is the code for the anonymous function implementation:

// input slider
var slider = document.getElementById("slide-input");
// span tag
var output = document.getElementById("slide-size");
output.innerHTML = slider.value;

slider.oninput = function() {
    console.log(this)
    output.innerHTML = this.value;
};
slider.onchange = function() {
    clearGrid();
    setupGrid(this.value);
};

Below is the code for the faulty arrow function implementation:

slider.oninput = () => {
    console.log(this)
    output.innerHTML = this.value;
};
slider.onchange = () => {
    clearGrid();
    setupGrid(this.value);
};

Can anyone explain how to properly use arrow functions in this case?

https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable — SuperStormer, Mar 21 '22 at 00:40
Reference the element using [Event.target](https://developer.mozilla.org/en-US/docs/Web/API/Event/target), eg `slider.addEventListener("input", e => { output.innerHTML = e.target.value; })` — Phil, Mar 21 '22 at 00:41
Arrow functions don't have their own this, use `console.log(slider)` instead of `console.log(this)` — Mister Jojo, Mar 21 '22 at 00:45

Javascript arrow function not working properly

0 Answers0