如何在旁邊的跨度中顯示“數字類型輸入”的值

Question

我有一個數字輸入類型元素。 我希望它的值顯示在它旁邊的范圍內。 當我單擊或滾動輸入中的增加或減少按鈕時。 我要更改跨度的相對值。 可能嗎？？

我試圖獲取該值並在跨度中顯示，但沒有成功。

Java腳本

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