CODEWITHSUNDEEP
javascript
EarlyCoder
EarlyCoder

Reputation: 1313

JavaScript Input field gets the old value on loading

I have an input field:

<input id="RangeRate1" type="range" min="125.00" max="500.00" value="250.00">

When I reload the page, the value of the input is set to what was set the last time the range slider was changed. For instance, if the rate was changed to 300 prior to page reload, when the page reloads, if I console out the value of the range slider:

let RateSlider = document.querySelector("RangeRate1")
console.log("existing rate: ", RateSlider.value)

I get 300! even though the html input value is still shown as 250.00 as above. When I use ctrl shift r, the correct number is displayed, in this case the value I see in the input HTML code, 250. So, is there a way to flush out the old value or overwrite it with the actual value in the input tag lin?

Upvotes: 2

Views: 1272

Answers (1)

B&#39;&#39;H Bi&#39;ezras -- Boruch Hashem
B&#39;&#39;H Bi&#39;ezras -- Boruch Hashem

Reputation: 1

Some browsers do this for "convenience" purposes even though it's less than convinient

You can just use some JavaScript to set the actual value to the attribute value (unless the attribute itself is also set by the browser to last value, in which case just set it to the hard coded value itself)


let RateSlider = document.querySelector("#RangeRate1")

RateSlider.value=parseInt(RateSlider.getAttribute("value"))

EDIT alternatively if the input is part of a form (assuming form has id if "myForm") you can reset it

myForm.reset()

Upvotes: 2

Related Questions