Console shows only old value (js, html)-CodePudding

so I've added slider that has range 0-4 and it shows value next to it but when I console log it shows only default value.

const output = document.getElementById("output").value;
let smth = document.getElementById("smth1");
let tb = document.getElementById("Test-button");

tb.addEventListener("click", () => {
  console.log(JSON.parse(JSON.stringify(output)))
});

</span><input type="range" value="0" min="0" max="4" oninput="this.nextElementSibling.value = this.value"><output id="output">0</output><br>

CodePudding user response：

Because the output is set on load, not on click. Do like this instead.

let smth = document.getElementById("smth1");
let tb = document.getElementById("Test-button");

tb.addEventListener("click", ()=>{
  const output = document.getElementById("output").value;
  console.log(JSON.parse(JSON.stringify(output)))
});

CodePudding user response：

You're reading the old value (not a reference to the value) and storing it in a variable named output.

Later, when there is a click event you are reading the value of output.

If you want the new value of the the input's value property you need to read that inside the event listener.