Setting initial value of input element in javascript doesn't propagate to output element

Question

I have the following HTML:

var mySlider = document.getElementById("mySlider");
var stored = localStorage.getItem("myData");
if (stored == null)
  mySlider.value = 5;
else
  mySlider.value = stored;
mySlider.addEventListener("change", () => {
  localStorage.setItem("myData", mySlider.value);
});

<form oninput="myNumber.value=mySlider.value">
  <input type="range" id="mySlider" min="0" max="10" />
  <output for="mySlider" id="myNumber">default</output>
</form>

All the getting and setting of the data to and from storage and the range slider seem to be working fine; the slider loads up to whatever previous value I had set it to. But the output myNumber only ever seems to respond to manual movements of the slider; it shows its original value "default" instead of the value of the input slider on initialization, up until I actually start moving the slider around.

I know I can go ahead and just set the value of the output when I set the value of the the slider, but it seems like that defeats the purpose of having the output element in the first place. Isn't the output supposed to show the results of the input whenever it's changed, regardless of whether that change comes from javascript or user interaction? How do I get it to behave this way?

You have to set the value manually; two-way data binding is only supported in frameworks like Angular or React. oninput is only triggered by changing the input via mouse or keyboard. — user5734311
– user5734311, Commented Jul 28, 2020 at 22:25
Cool, I didn't realize we had a way to put runnable code directly in our questions. — Trevortni
– Trevortni, Commented Jul 28, 2020 at 23:15

B''H Bi'ezras -- Boruch Hashem · Accepted Answer · 2020-07-28 22:31:54Z

1

There's nothin particularly special about the output tag, its the form's oninput that does the actual settin, and I've tested it (you can test too) that the oninput event for the form doesn't seem to be called when simply settin the value of the input manually (meaning, usin javascript).

If you don't want to literally set the value of the output element, you can simply dispatch the "input" event of the form, right after you change the value of any of the elements. Assumin your form has an id of "u", then, after settin the value of the child element, simply call: (all together):

mySlider.value=5; u.dispatchEvent(new Event("input"))

answered Jul 28, 2020 at 22:31

B''H Bi'ezras -- Boruch Hashem

1

Sign up to request clarification or add additional context in comments.

Comments

Unmitigated · Accepted Answer · 2020-07-28 22:28:06Z

No, the output element does not automatically show the value of the input anytime it changes; you are setting it manually in the input event handler of the form: <form oninput="myNumber.value=mySlider.value">.

According to MDN:

The HTML Output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

In other words, you need to set the value manually when the page loads. ^Demo

var mySlider = document.getElementById("mySlider");
var stored = localStorage.getItem("myData");
if (stored == null)
    mySlider.value=5;
else
    mySlider.value=stored;
document.getElementById("myNumber").value = mySlider.value;
//manually set value on page load
mySlider.addEventListener("change", () =>
{
    localStorage.setItem("myData", mySlider.value);
});

<form oninput="myNumber.value=mySlider.value">
    <input type="range" id="mySlider" min="0" max="10" />
    <output for="mySlider" id="myNumber">default</output>
</form>

Collectives™ on Stack Overflow

Setting initial value of input element in javascript doesn't propagate to output element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related