范围输入控制两个不同的字段

Question

我是编码新手，我必须构建一个抵押贷款模拟器。为此，我有一个范围字段，用户可以在其中选择第一个字段中显示的年数。另一个有利率的领域。范围是否也可以控制速率。我想以这种方式为用户建议费率：2 至 9 年的利率为 0.75%从 10 到 11 是 0.90%12到14是1%15 到 19 是 1.1%20 到 24 是 1.3%25 到 29 是 1.65%30 是 2.18%但我也希望他们在不影响年数的情况下写下他们的费率。到目前为止，我已经做到了：https://jsfiddle.net/f3sy8dh5/    <div class="loans-simulator">  <label for="duration">Loan duration</label>  <input type="range" name="dureeInputName" id="dureeInputId" value="2" min="2" max="30" oninput="dureeOutputId.value = dureeInputId.value" onchange="updateTextInput(this.value);">  <input name="dureeOutputName" id="dureeOutputId" value="0"><br/>  <label for="rates">Rate %</label>  <input id="rates" value="0.0" step=".01" min="0.0"></div>

Answer 1

如果您想在贷款期限字段的每次更改时更新利率字段，那么这里是如何做的

var ratesValue = document.querySelector("#rates");

document.querySelector("#dureeInputId").onchange = function() {

  if(this.value >= 2 && this.value <= 9) {

    ratesValue.value = 0.75;

  }else if(this.value >= 10 && this.value <= 11) {

    ratesValue.value = 0.9;

  }else if(this.value >= 12 && this.value <= 14) {

    ratesValue.value = 1;

  }else if(this.value >= 15 && this.value <= 19) {

    ratesValue.value = 1.1;

  }else if(this.value >= 20 && this.value <= 24) {

    ratesValue.value = 1.3;

  }else if(this.value >= 25 && this.value <= 29) {

    ratesValue.value = 1.65;

  }else {

    ratesValue.value = 2.18;

  }

};

<div class="loans-simulator">

  <label for="duration">Loan duration</label>

  <input type="range" name="dureeInputName" id="dureeInputId" value="2" min="2" max="30" oninput="dureeOutputId.value = dureeInputId.value" onchange="updateTextInput(this.value);">

  <input name="dureeOutputName" id="dureeOutputId" value="2"><br/>

  <label for="rates">Rate %</label>

  <input id="rates" value="0.75" step=".01" min="0.0">

</div>