JavaScript 输入字段在加载时获取旧值

Question

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?

Answer 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()