如何将span元素的值预填充到HTML表单输入框中？

很简单，只需要添加表单输入元素，然后在JS里把滑块值同时同步给span和这个输入框就行，具体代码如下：

完整HTML代码 #

<div class="slidecontainer">
    <input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<!-- 新增的表单输入框，用来预填充滑块值 -->
<form>
    <label>预填充分数：</label>
    <input type="number" id="scoreInput" min="0" max="10">
</form>

对应的JavaScript代码 #

const slider1 = document.getElementById("myRange1");
const output1 = document.getElementById("demo1");
const scoreInput = document.getElementById("scoreInput");

// 页面加载时，把滑块默认值同时设置给span和输入框
output1.textContent = slider1.value;
scoreInput.value = slider1.value;

// 拖动滑块时，同步更新两个元素的值
slider1.addEventListener('input', function() {
    output1.textContent = this.value;
    scoreInput.value = this.value;
});

关键点说明 #

• 初始化阶段：页面加载完成后，直接将滑块的默认值（这里是5）赋值给输入框的value属性，实现预填充效果。
• 实时同步：通过监听滑块的input事件，每次值变化时同时更新span的显示内容和输入框的值，保证两者始终一致。

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