如何在旁边的范围中显示"数字类型输入"的值

Question

我有一个数字输入类型元素。我希望它的值显示在它旁边的范围中。当我单击或滚动输入内的增加或减少按钮时。我希望跨度的相对值发生变化。可能吗？？

我试图获取值并在跨度中显示，但没有奏效。

爪哇语

var displayer = document.getElementById('displayer');
var day = document.getElementById('days');
var hrs = document.getElementById('hours');
var s_t = document.getElementById('s_t');
function funcday() {
day.style.border = "1.5px solid darkorange";
hrs.style.border = "1.5px solid mediumaquamarine";
s_t.style.border = "1.5px solid darkorange";
s_t.setAttribute("max", 365);
var d = s_t.value;
document.getElementById('display_d').textContent = d;
}
function funhrs() {
day.style.border = "1.5px solid mediumaquamarine";
hrs.style.border = "1.5px solid darkorange";
s_t.style.border = "1.5px solid darkorange";
s_t.setAttribute("max", 48);
var h = s_t.value;
document.getElementById('display_h').textContent = h;
}

#container {
display: flex;
}
.st {
width: 60px;
margin-right: 10px;
}
#days,
#hours {
color: #fff;
width: 70px;
margin-left: 10px;
padding: 6px;
cursor: pointer;
background-color: mediumaquamarine;
border: 1.5px solid mediumaquamarine;
text-align: center;
font-family: 'Courier';
}
.displayer {
align-content: center;
text-align: center;
line-height: 2;
margin-left: 20px;
margin-right: 20px;
font-size: 15px;
border: 1px solid white;
display: block;
float: right;
}
.displayer span {
margin-right: 5px;
margin-left: 5px;
}

<div id="container">
<input type="number" min="1" class="st" id="s_t" autocomplete="off">
<div id="days" onclick="funcday();">Days</div>
<div id="hours" onclick="funhrs();">Hours</div>
<div id="displayer" class="displayer">
<span id="display_d">00</span><span>Days</span>
<span id="display_h">00</span><span>Hours</span>
</div>
</div>

Answer 1

您应该将 onchange 事件处理程序添加到输入元素，并更改此处理程序中 span 元素的文本。