HTML范围滑块操作

Question

我正在尝试通过使两个范围滑块相互交互然后在标签中显示每月付款来制作贷款计算器，这是两个要求：

在“月份”范围滑块上仅显示 5 个值：12、18、24、30、36 个月（由 Alexander Solonik 解决）
计算利息为75%。 (自己解决)

好的，代码是这样发展的，:

  <!--first range slider: money needed to borrow-->
  <script language="JavaScript">
    function showpay() {
        var princ = document.calc.loan.value;
        var term  = document.calc.months.value;
        var intr   = (75 / 1200)*1.16; /*must include taxes, depending on your country, in my case is 16%*/

        var auxterm = 0;
        switch(term){
            case '1': auxterm = 12; break;
            case '2': auxterm = 18; break;
            case '3': auxterm = 24; break;
            case '4': auxterm = 30; break;
            case '5': auxterm = 36; break;
        }
        document.calc.pay.value = Math.round((princ * 1000) * intr / (1 - (Math.pow(1/(1 + intr), auxterm))));
      // payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months))
    }
  </script>

  <center>
    <form name=calc method=POST>
      <table width=60% border=0>
        
          <h1>¿How much money do you need?</h1>
          <p>Borrow from ,000 to ,000</p><br>

          <div>
            <input name="loan" type="range" min="2" max="80" value="2" class="slider" id="myRange" style="color: black;">
            <p><br><strong>$ <span id="demo"></span>,000</strong></p>
          </div>
          <script>
            var slider = document.getElementById("myRange");
            var output = document.getElementById("demo");
            output.innerHTML = slider.value;
            slider.oninput = function() { output.innerHTML = this.value; }
          </script>
        

        
          <h1>In how many months would you like to pay?</h1>
          <p>from 12 to 36 months.</p><br>
          <div>
            <input name="months" type="range" min="1" max="5" value="0" class="slider" id="input" style="color: black;">
            <strong><p><span id="result"></span> months</p></strong>
          </div>
          <script>
            var result = document.getElementById('result'), input = document.getElementById('input')

            var arr = [12,18,24,30,36]

            input.oninput = function() { result.innerHTML = arr[this.value - 1] }
            input.oninput()
          </script>
        

        <!--<tr>
          <p>$ <span oninput="showpay()" value=Calculate></span></p>
        </tr>-->
        
        
          <tr>
            Monthly Payment
            <input type=text name=pay size=10>
          </tr>

          <input type=button onClick='showpay()' value=Calculate><!-- oninput="showpay()"-->
      </table>
    </form>
  </center>

基本完成，但是利息计算有误，在月份滑块上取值：1,2,3,4,5 因为这是滑块的值，我需要它取arr = [12,18,24,30,36] 的值，知道怎么做吗？

好的，现在已经解决了，这可能对某些学校项目或实际贷款计算器有帮助。 :)

Answer 1

你打错了，slider不是lider。

第 22 行改为

slider.oninput = function() { output.innerHTML = this.value; }

并且该值不可见，因为您在 p 标签中应用了 CSS 颜色值白色。也将其更改为

 months

Answer 2

要在范围滑块中仅选择特定值，您可以这样做

var result = document.getElementById('result'),
input = document.getElementById('input')

var arr = [12,18,24,30,36]

input.oninput = function() {
   result.innerHTML = arr[this.value - 1]
}

input.oninput()

<input type="range" min="1" max="5" id="input" value="0">

<div id="result">
  
</div>

HTML范围滑块操作

HTML range slider operation

javascript

html

rangeslider