在javascript中设置输入元素的初始值不会传播到输出元素答案

【问题标题】：Setting initial value of input element in javascript doesn't propagate to output element在javascript中设置输入元素的初始值不会传播到输出元素
【发布时间】：2020-11-18 10:52:22
【问题描述】：

我有以下 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>

从存储和范围滑块获取和设置数据的所有操作似乎都运行良好；滑块加载到我之前设置的任何值。但是输出myNumber 似乎只响应滑块的手动移动；它在初始化时显示其原始值“默认”而不是输入滑块的值，直到我真正开始移动滑块。

我知道我可以在设置滑块的值时继续设置输出的值，但这似乎违背了首先设置输出元素的目的。输出是否不应该在更改时显示输入的结果，无论该更改来自javascript还是用户交互？我如何让它表现得这样？

【问题讨论】：

您必须手动设置该值；双向数据绑定仅在 Angular 或 React 等框架中受支持。 oninput 只能通过通过鼠标或键盘更改输入来触发。
酷，我没有意识到我们有办法将可运行代码直接放在我们的问题中。

标签： javascript html input output

【解决方案1】：

输出标签并没有什么特别之处，它是表单的 oninput，它执行实际的设置，我已经测试过（你也可以测试）表单的 oninput 事件似乎没有被简单地调用手动设置输入的值（意思是，使用 javascript）。

如果您不想直接设置输出元素的值，您可以在更改任何元素的值后立即调度表单的“输入”事件。假设您的表单的 id 为“u”，那么在设置子元素的值之后，只需调用：（全部一起）：

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

【讨论】：

【解决方案2】：

不，输出元素不会在任何时候自动显示输入的值；您在input 表单的事件处理程序中手动设置它：<form oninput="myNumber.value=mySlider.value">。

根据MDN：

HTML 输出元素 () 是一个容器元素，网站或应用可以将计算结果或用户操作的结果注入其中。

换句话说，您需要在页面加载时手动设置该值。 ^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>

【讨论】：