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

Question

问题：

我想知道是否有类似的功能可以将文本重置为默认值，就像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>中获取值并在每次提交答案时将其重置，类似于defaultValue中的<input>。

Answer 1

您可以使用data-X属性：

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

JS：

sliderOutput.innerHTML = sliderOutput.dataset.defaultValue

Answer 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;