javascript - 如何使用范围 slider 更新值？

Question

当用户在输入框中键入值时，网页上的值 1 和 2 不会更改。我该如何解决这个问题？

<p id="value1">Roll Below: 47.5</p>
<p id="value2">Multiplier: 2</p>   
<form>
    <input id="range" type="range" name="rangeInput" min="0.01" step="0.01" max="94" value="47.5" class="white" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">
    <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput"  oninput="rangeInput.value=amount.value" />
</form>

JS

function updateTextInput(val) {
    var value1 = document.getElementById("range").value;
    document.getElementById('value1').innerHTML = "Roll Below:   "+value1;

    var value2 = (0.95/value1 * 100).toFixed(2);
    document.getElementById('value2').innerHTML = "Multiplier:  "+value2;
}

演示:http://codepen.io/hokaien/pen/qRBgEg

Answer 1

您可以使用onkeyup:

function updateTextInput(val) {
  var value1 = document.getElementById("range").value;
  document.getElementById('value1').innerHTML = "Roll Below:   " + value1;

  var value2 = (0.95 / value1 * 100).toFixed(2);
  document.getElementById('value2').innerHTML = "Multiplier:  " + value2;
}

<p id="value1">Roll Below: 47.5</p>
<p id="value2">Multiplier: 2</p>
<form>
  <input id="range" type="range" name="rangeInput" min="0.01" step="0.01" max="94" value="47.5" class="white" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">
  <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput" onkeyup="updateTextInput(this.value);" oninput="amount.value=rangeInput.value" />
</form>