javascript - 如何在旁边的span中显示一个 "number type input"的值

Question

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

我试图获取值并在 span 中显示，但没有成功。

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