如何在旁边的跨度中显示“数字类型输入”的值

Question

I have a number input type element. I want its value to be displayed in the span next to it. As I click or scroll on the increase or decrease button inside the input. I want the span's relative value to change. Is it possible??

I have tried to get the value and display in span but did not worked.

Javascript

 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元素的文本。