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

Question

我是编码新手，我必须构建一个抵押贷款模拟器。为此，我有一个范围字段，用户可以在其中选择第一个字段中显示的年数。另一个有利率的领域。范围是否也可以控制速率。我想以这种方式为用户建议费率：

1. 2 至 9 年的利率为 0.75%

2. 从 10 到 11 是 0.90%

3. 12到14是1%

4. 15 到 19 是 1.1%

5. 20 到 24 是 1.3%

6. 25 到 29 是 1.65%

7. 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() {&nbsp; if(this.value >= 2 && this.value <= 9) {&nbsp; &nbsp; ratesValue.value = 0.75;&nbsp; }else if(this.value >= 10 && this.value <= 11) {&nbsp; &nbsp; ratesValue.value = 0.9;&nbsp; }else if(this.value >= 12 && this.value <= 14) {&nbsp; &nbsp; ratesValue.value = 1;&nbsp; }else if(this.value >= 15 && this.value <= 19) {&nbsp; &nbsp; ratesValue.value = 1.1;&nbsp; }else if(this.value >= 20 && this.value <= 24) {&nbsp; &nbsp; ratesValue.value = 1.3;&nbsp; }else if(this.value >= 25 && this.value <= 29) {&nbsp; &nbsp; ratesValue.value = 1.65;&nbsp; }else {&nbsp; &nbsp; ratesValue.value = 2.18;&nbsp; }};<div class="loans-simulator">&nbsp; <label for="duration">Loan duration</label>&nbsp; <input type="range" name="dureeInputName" id="dureeInputId" value="2" min="2" max="30" oninput="dureeOutputId.value = dureeInputId.value" onchange="updateTextInput(this.value);">&nbsp; <input name="dureeOutputName" id="dureeOutputId" value="2"><br/>&nbsp; <label for="rates">Rate %</label>&nbsp; <input id="rates" value="0.75" step=".01" min="0.0"></div>