时间戳

首页 > 解决方案 > 同步 2 HTML 输入范围和数字

javascript - 同步 2 HTML 输入范围和数字

问题描述

嘿，我想同步 2 个输入，所以如果有人更改滑块，那么也应该更改数字输入，反之，我知道还有其他已回答的问题，但对我不起作用，因为不更改任何课程很重要names 或 ids 仅与滑块同步的数字输入，但也不是相反，我的代码是：

<div class="slidecontainer">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
  <input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>

我的js是

document
  .querySelector(".slider")
  .addEventListener("input", updateValue);
document
  .getElementsByClassName("number")
  .addEventListener("input", updateValue);

function updateValue(e) {
  var sibling =
    e.target.previousElementSibling ||
    e.target.nextElementSibling;
  sibling.value = e.target.value;
}

标签： javascripthtmlinput

解决方案

您甚至可以将整个内容缩短为：

const inputs=[...document.querySelectorAll("input")];
inputs.forEach((inp,i)=>inp.addEventListener("input",()=>
  inputs[1-i].value=inputs[i].value )
)
<div class="slidecontainer">
  <input type="range" min="0.25" max="5" value="1" step="0.25" class="slider" id="playbackSpeed">
  <input type="number" value="1" class="number" id="playbackSpeed" placeholder="1,0">
</div>

推荐阅读