使用 JavaScript 将 HTML 元素重置为默认值
Reset HTML element to default value with JavaScript
问题:
我想知道是否有类似的功能允许将文本重置为其默认值,就像 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
for <input>
。
可以使用data-X属性:
<output data-default-value="50">50</output>
JS:
sliderOutput.innerHTML = sliderOutput.dataset.defaultValue
您正在尝试将 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;
您也可以使用本机重置。
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>
问题:
我想知道是否有类似的功能允许将文本重置为其默认值,就像 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
for <input>
。
可以使用data-X属性:
<output data-default-value="50">50</output>
JS:
sliderOutput.innerHTML = sliderOutput.dataset.defaultValue
您正在尝试将 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;
您也可以使用本机重置。
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>