e.target.value is defined but this.value is undefined

Asked Jan 25 '22 at 18:18

Active Jan 25 '22 at 18:18

Viewed 16 times

Just been playing around with js and noticed this.value is undefined in the node to which I've attached a change event listener. Probably missing something obvious but would appreciate an explanation.

HTML

   <label for="spacing">Spacing:</label>
      <input
        id="spacing"
        type="range"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />

const singleInput = document.getElementById("spacing");

const handleUpdate = (e) => {
        console.log(this.value);
        console.log(e.target.value);
      };

singleInput.addEventListener("change", handleUpdate);

// this.value = undefined, e.target.value = defined

asked Jan 25 '22 at 18:18

Pedro Sanchez

2

`this` isn't passed to arrow functions, use a traditional function. – Barmar Jan 25 '22 at 18:19
Just to add, when I console.log(this) it displays the window in the console for some reason. – Pedro Sanchez Jan 25 '22 at 18:20
Ah excellent, thanks @Barmar – Pedro Sanchez Jan 25 '22 at 18:21

e.target.value is defined but this.value is undefined

0 Answers0