Console shows only old value (js, html)

October 6, 2022

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>

>Solution :

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)))
});