是否可以链接范围和数字HTML输入？

Question

有没有办法链接a <input type="range">和a的值<input type="number">？

我想对滑块或数字输入进行更改,并更新两个字段.出于某种原因,我只能从range元素中获取未定义的值.

以下是本文档这一部分的当前JavaScript和HTML:

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 1

它不起作用,因为它updateTextInput1(this.val)应该是updateTextInput1(this.value):

function updateTextInput1(val) {
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

但是,我建议使用不引人注目的JavaScript.

只需将input事件附加到每个元素即可.这样做,两个元素将同步.

var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');

range.addEventListener('input', function (e) {
  field.value = e.target.value;
});
field.addEventListener('input', function (e) {
  range.value = e.target.value;
});

<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

或者您可以使用更紧凑的方法并选择兄弟元素:

document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);

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

<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />