如何用JavaScript重置HTML元素至默认值？（含output元素处理）

当然可以实现！HTML的<output>元素本身并没有原生的defaultValue属性，但我们可以通过几种简单的方式给它添加类似的功能，让你不用硬写固定值就能重置到初始状态。

方法一：利用HTML data属性存储默认值 #

这种方法最符合HTML规范，我们可以给<output>添加一个自定义的data-default-value属性来保存初始值：

修改后的HTML #

<input type="range" class="custom-range" name="studyslider" min="1" max="100" step="1" value="50" oninput="sliderChange(this)" onchange="sliderChange(this)">
<output class="badge badge-light badge-width mt-4 mb-3" name="studyslider-output" data-default-value="50">50</output>

重置的JavaScript代码 #

// 重置<input>的值（保持你的原有逻辑）
const slider = node.querySelector(".custom-range");
slider.value = slider.defaultValue;

// 重置<output>的值：读取data属性里的默认值
const sliderOutput = node.querySelector("output");
sliderOutput.innerHTML = sliderOutput.dataset.defaultValue;

方法二：给output元素添加自定义的defaultValue属性 #

这种方式更贴近<input>的defaultValue用法，我们可以在页面加载时把<output>的初始内容保存为它的自定义属性：

初始化与重置的JavaScript代码 #

// 页面加载时，先保存output的初始值到自定义属性
const sliderOutput = node.querySelector("output");
sliderOutput.defaultValue = sliderOutput.innerHTML;

// 重置时直接使用这个自定义属性
function resetSlider() {
  // 重置<input>的值
  const slider = node.querySelector(".custom-range");
  slider.value = slider.defaultValue;
  
  // 重置<output>的值，和input用法一致
  sliderOutput.innerHTML = sliderOutput.defaultValue;
}

为什么这两种方法好用？ #

• 不需要硬写固定的重置值（比如原来的"50"），如果后续修改了初始值，只需要改HTML里的内容，不用动JS代码
• 逻辑和<input>的defaultValue保持一致，理解和维护起来更顺手

不管选哪种方法，都能实现你想要的「每次提交答案时自动获取初始值重置」的效果。

内容的提问来源于stack exchange，提问作者kexxcream