JS always returing the first value of 0 in an INPUT Range. After the first attempt it returns the co-CodePudding

I am using an Input range slider and JS is giving the default value of 0 first and after that it gives the correct value. So when I go to change the textContent to the value of the range its always a 0. After the first attempt the value is correct.

I have tried event listener to be "change" instead of "click". The result stays the same.

What am I missing?

JS Fiddle https://jsfiddle.net/5g78a4qL/

HTML '''

Select your age

            <input type="range" min="1" max="100" id="myRange" >'''

JS '''let slider = document.getElementById("myRange");

let output = 0; let personAge = 0;

document.querySelector('#myRange').addEventListener('click', function(event){

document.querySelector('#yourAge').textContent = "Your Age: ";

output = document.getElementById("value")

output.innerHTML = slider.value

slider.oninput = function() {
    output.innerHTML = this.value;
    personAge = Number(this.value);
}

})

document.querySelector('#myRange').addEventListener('click', function(event){ console.log(personAge);

})'''

CodePudding user response：

Maybe try adding a value attribute to your input tag like bellow:

<input type="range" value="1" min="1" max="100" id="myRange" >

on top of the above line change your script to this :

let slider = document.getElementById("myRange");

let output = 0; let personAge = 0;

slider.addEventListener('click', function(event){

document.querySelector('#yourAge').textContent = "Your Age: ";

output = document.getElementById("value")

output.innerHTML = slider.value


output.innerHTML = this.value;
personAge = Number(this.value);

console.log(personAge);

});

you were selecting the same element (slider) multiple times and adding the same event listener to it multiple times but it works now try it.

and if you want to structure you code better change your javascript again to this:

let slider = document.getElementById("myRange");
let output = document.getElementById("value");
let personAge = 0;

document.querySelector('#yourAge').textContent = "Your Age: ";
slider.addEventListener('click', function(event){
output.innerHTML = this.value;
personAge = Number(this.value);
console.log(personAge);
});

CodePudding user response：

Try 'change' event listener instead of click...

document.querySelector('#myRange').addEventListener('change', function(event){

  document.querySelector('#yourAge').textContent = "Your Age: ";

  output = document.getElementById("value")

  output.innerHTML = slider.value

  slider.oninput = function() {
    output.innerHTML = this.value;
    personAge = Number(this.value);
  }
})

THE RANGE INPUT:

<input type="range" value="1" min="1" max="100" id="myRange" >

CodePudding user response：

Try this

 <div >

            <div > <span id="yourAge">Select your age</span> <span id="value"></span></div>

            <input type="range" min="1" max="100" id="myRange" >
        </div>
<script>
let slider = document.getElementById("myRange");
let output = document.getElementById("value");
let personAge = 0;

document.querySelector('#myRange').addEventListener('click', 
function(event){

document.getElementById("yourAge").textContent = "Your Age: ";

output.textContent = slider.value

personAge = Number(slider.value);

    console.log(personAge);
})


</script>