使用 JavaScript 将 HTML 元素重置为默认值答案

【问题标题】：Reset HTML element to default value with JavaScript使用 JavaScript 将 HTML 元素重置为默认值
【发布时间】：2020-04-27 04:45:01
【问题描述】：

问题：

我想知道是否有类似的功能允许将文本重置为其默认值，就像 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">50</output>

JavaScript：

// Resetting the value for <input>
const slider = node.querySelector(".custom-range");
slider.value = slider.defaultValue;

// Resetting the value for <output>
const sliderOutput = node.querySelector("output");
sliderOutput.innerHTML = "50";

期望的输出：

获取<output>中的值并在每次提交答案时重置它，类似于<input>的defaultValue。

【问题讨论】：

你不能用silderOutput.value吗？
@evolutionxbox <output> 没有 value 属性，我要问的是是否有办法避免在 JS 中硬编码“50”，而是从 HTML 中获取以动态的方式。
我猜你必须在第一次覆盖之前从 HTML 中提取它。
使用data 属性怎么样？（输出确实有一个value 属性html.spec.whatwg.org/multipage/…）
当然理想的解决方案是让slider.value = slider.defaultValue; sliderChange(slider); 也导致原始的“默认”输出值。

标签： javascript html default-value

【解决方案1】：

你可以使用data-X属性：

<output data-default-value="50">50</output>

JS：

sliderOutput.innerHTML = sliderOutput.dataset.defaultValue

【讨论】：

【解决方案2】：

您正在尝试将slider.defaultValue 的值分配给sliderOutput.innerHTML，为什么不这样做呢？

// Resetting the value for <input> const slider = node.querySelector(".custom-range"); slider.value = slider.defaultValue;

// Resetting the value for <output> const sliderOutput = node.querySelector("output"); sliderOutput.innerHTML = slider.defaultValue;

【讨论】：

【解决方案3】：

您也可以使用本机重置。

function sliderChange(e) {
  document.getElementById("output").value = document.getElementById("slider").value
}

<form>
  <input id="slider" 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" id="output">50</output>
<input type="reset" />
</form>

【讨论】：