下拉框不起作用？

Question

我正在尝试制作一个带有下拉框的汽车贷款计算器。您输入要借入的金额，然后会出现一个下拉列表，其中显示利率为 6.75% 或 9.71%。然后你输入你想要偿还贷款的月份。但是它似乎没有正常工作，它不会给出两个不同数字的结果。什么时候给出 6.75% 的结果答案是错误的我的 JavaScript 有什么地方错了吗？我在想我可以按错误的顺序使用它吗？我已经做了我能想到的一切，但它不起作用？

这是html

<html>
<body>
<p>Loan Amount: €<input id="amount" type="number" min="1" max="1000000" onchange="computeLoan()"></p>

<p>Interest Rate:
 <select id= "rate" onchange="computeLoan()">
    <option value="" disabled="disabled" selected="selected">Select A Loan Rate</option>
    <!-- 6.75 loan -->
    <option value="6.75" input id="interest_rate">6.75%</option>
    <!-- 9.71 loan -->
    <option value="9.71" input id="interest_rate">9.71%</option>
</select></p>


<p>Months: <input id="months" type="number" min="1" max="60" value="1" step="1" onchange="computeLoan()"></p>


<h2 id="payment"></h2> 

</body>
</html>

javascript

//条件逻辑

function computeLoan(){

// grab the selected value of the dropdown box 
var r = document.getElementById("rate");
var rateSelected = r.options[r.selectedIndex].value;
var interest_rate = document.getElementById('interest_rate').value;

//grab elements by their ID
var amount = document.getElementById('amount').value;
var months = document.getElementById('months').value;
document.getElementById("interest_rate").value=rateSelected;


//do the maths do find the percentage
var interest = (amount * (interest_rate * .01)) / months;

//bring results to two decimal places
var payment = ((amount / months) + interest).toFixed(2);
payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");


// display the results
document.getElementById('payment').innerHTML = "Your Monthly Payment = €"+payment;

}

Answer 1

试试下面的代码：

var interest = (parseFloat(amount) * (parseFloat(interest_rate) * .01)) / parseFloat(months);

Answer 2

在您的逻辑中替换这些代码行，您必须First convert the string format into numbers and then do the math。

var rateSelected = parseFloat(r.value); // no need of r.options[r.selectedIndex].value
var interest_rate = parseFloat(document.getElementById('interest_rate').value);

//grab elements by their ID
var amount = parseFloat(document.getElementById('amount').value);
var months = parseFloat(document.getElementById('months').value);

稍后当您进行数学运算时，事情必须按预期进行。

下拉框不起作用？

dropdown box not working?

javascript

function

calculator