Question

我有这段代码，它显示了滑块的值并做了一些简单的数学运算并显示结果。

我想在输入字段中显示value1, value2, value3。更改滑块时，输入值应更改。或者当输入改变时，滑块会自动改变。

＆＃13;

function updateTextInput() {

  var value1 = document.getElementById("range").value;
  document.getElementById('value1').innerHTML = "Roll Under:  " + "<b>" + value1 + "</b>" + " ";

  var value2 = (0.95 / value1 * 100).toFixed(2);
  document.getElementById('value2').innerHTML = "Multiplier:  " + "<b>" + value2 + "</b>" + " ";

  var value3 = (value2 * 10).toFixed(2);
  document.getElementById('value3').innerHTML = "Profit:  " + "<b>" + value3 + "</b>" + " ";

}

＆＃13;

<span id="value1">Roll Under: <b>47.5</b> </span><span id="value2">Multiplier: <b>2</b> </span><span id="value3">Profit: <b>20</b> </span>


<!-- Should be replace with <input id="value1"><input id="value2"><input id="value3"> -->

    <form>
      <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);"  >
    </form>

＆＃13;

我尝试了类似<input id="value1input">的内容来替换<span id="value1">Roll Under: <b>47.5</b> </span>和document.getElementById('value1input').value=value1;但是当用户更改输入中的值时，滑块不会相应地更改。

value1, value2, value3应该有3个输入，更改任何输入应该更改其他2个输入值和滑块。

Answer 1

希望这会对你有所帮助

＆＃13;

    function updateTextInput() {

        var value1 = document.getElementById("range").value;
        document.getElementById('value1').innerHTML = "Roll Under:  " + "<b>" + value1 + "</b>" + " ";
        document.getElementById('value1input').value = value1;

        var value2 = (0.95 / value1 * 100).toFixed(2);
        document.getElementById('value2').innerHTML = "Multiplier:  " + "<b>" + value2 + "</b>" + " ";
        document.getElementById('value2input').value = value2;

        var value3 = (value2 * 10).toFixed(2);
        document.getElementById('value3').innerHTML = "Profit:  " + "<b>" + value3 + "</b>" + " ";
        document.getElementById('value3input').value = value3;
    }

    function changeTextInput(elemnt) {
        var target_id = elemnt.id;
        var rangeval = parseFloat(elemnt.value).toFixed(2);
        rangeval = parseFloat(rangeval);
        switch (target_id) {
            case "value2input":
                rangeval = (0.95 / rangeval) * 100;
                break;
            case "value3input":
                rangeval = (0.95 / (rangeval/10)) * 100;
                break;
        }
        document.getElementById('range').value = rangeval.toFixed(2);
        updateTextInput();
    }

    updateTextInput();

＆＃13;

<span id="value1">Roll Under: <b>47.5</b> </span>
<span id="value2">Multiplier: <b>2</b> </span>
<span id="value3">Profit: <b>0.02</b> </span>
<br><br>
<input id="value1input" onchange="changeTextInput(this)">
<input id="value2input" onchange="changeTextInput(this)">
<input id="value3input" onchange="changeTextInput(this)">

<form>
    <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);">
</form>

＆＃13;

Answer 2

希望以下代码和代码段可以为您提供帮助，

＆＃13;

function updateTextInput() {
  var value1 = document.getElementById("range").value;
  document.getElementById('value1').innerHTML = "Roll Under:  " + "<b>" + value1 + "</b>" + " ";
  var value2 = (0.95 / value1 * 100).toFixed(2);
  document.getElementById('value2').innerHTML = "Multiplier:  " + "<b>" + value2 + "</b>" + " ";
  var value3 = (value2 * (document.getElementById("range").value)).toFixed(2);
  document.getElementById('value3').innerHTML = "Profit:  " + "<b>" + value3 + "</b>" + " ";
}

$('[data-input]').on('keyup',function(){
   var num=Number($(this).attr('data-input'));
   // validate min max here, if false then use 
   // return false, so you can prevent invalid values
   
   // clear other inputs except this,
   $('[data-input]').not(this).val('');
   switch(num){
      case 1:
          $('#value1 b').text(this.value);
          $('#range').val(this.value);
          break;
      case 2:
          $('#value2 b').text((0.95 / this.value * 100).toFixed(2));
          $('#range').val((0.95 / this.value * 100).toFixed(2));
          break;
      case 3:
          $('#value3 b').text(Number($('#value2 b').text())/Number(this.value));
          $('#range').val(Number($('#value2 b').text())/Number(this.value));
          break;
   }
   updateTextInput();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="value1">Roll Under: <b>47.5</b> </span><span id="value2">Multiplier: <b>2</b> </span><span id="value3">Profit: <b>0.02</b> </span>


<!-- Should be replace with <input id="value1"><input id="value2"><input id="value3"> -->

<form>
  <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);">
</form>
<br/>
Input 1 : <input id="value1input" data-input="1" /><br/>
Input 2 : <input id="value2input" data-input="2" /><br/>
Input 3 : <input id="value3input" data-input="3" /><br/>

＆＃13;

动态范围滑块和输入

2 个答案: