JavaScript

Question

var $ = function(id) {
    return document.getElementById(id);
};

// var future_value;

var calculateFV = function (investment, interest, years) { 
    var future_value = investment;
     for (var i = 1; i <= years; i++) {
       future_value = future_value + (future_value * interest / 100);
     }
     future_value = future_value.toFixed(2);
     return future_value;
     //$("future_value").value = calculateFV(investment, interest, years);
};

var processEntries = function () {
    var investment = parseFloat($("investment").value);
    var interest = parseFloat($("interest").value);
    var years = parseFloat($("years").value);

    $("future_value").value = calculateFV(investment, interest, years);
};

window.onload = function () {
    $("calculate").onclick = processEntries;
};

我认为问题在于for循环，但我不知道，此时我已尝试过所有内容。什么都不会运行，也许你们可以发现这个错误？

<label for="investment">Total Investment:</label>
        <input type="text" id="investment">
        <span id="investment_error">&nbsp;</span><br>

        <label for="rate">Annual Interest Rate:</label>
        <input type="text" id="annual_rate">
        <span id="rate_error">&nbsp;</span><br>

        <label for="years">Number of Years:</label>
        <input type="text" id="years">
        <span id="years_error">&nbsp;</span><br>

        <label for="future_value">Future Value:</label>
        <input type="text" id="future_value" disabled><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate"><br>  

现在想一想我的HTML中要做些什么？

Answer 1

您的代码应该只进行一次小修正，$("interest").value应$("annual_rate").value使用您的HTML：

我唯一要改变的是删除disabled输入上的future_value属性。如果启用diasbled属性，则不会提交该值。您可以使用readonly来阻止用户修改字段。但是，在任何情况下都应该仔细检查后端的计算。

var $ = function(id) {
  return document.getElementById(id);
};

// var future_value;

var calculateFV = function(investment, interest, years) {
  var future_value = investment;
  for (var i = 1; i <= years; i++) {
    future_value = future_value + (future_value * interest / 100);
  }
  future_value = future_value.toFixed(2);
  return future_value;
  //$("future_value").value = calculateFV(investment, interest, years);
};

var processEntries = function() {
  var investment = parseFloat($("investment").value);
  var interest = parseFloat($("annual_rate").value);
  var years = parseFloat($("years").value);

  $("future_value").value = calculateFV(investment, interest, years);
};

window.onload = function() {
  $("calculate").onclick = processEntries;
};

<label for="investment">Total Investment:</label>
<input type="text" id="investment">
<span id="investment_error">&nbsp;</span><br>

<label for="rate">Annual Interest Rate:</label>
<input type="text" id="annual_rate">
<span id="rate_error">&nbsp;</span><br>

<label for="years">Number of Years:</label>
<input type="text" id="years">
<span id="years_error">&nbsp;</span><br>

<label for="future_value">Future Value:</label>
<input type="text" id="future_value" readonly><br>

<label>&nbsp;</label>
<input type="button" id="calculate" value="Calculate"><br>

Answer 2

工作正常。没问题。

var $ = function(id) {
  return document.getElementById(id);
};

//var future_value;

var calculateFV = function(investment, interest, years) {
  var future_value = investment;
  for (var i = 1; i <= years; i++) {
    future_value = future_value + (future_value * interest / 100);
  }
  future_value = future_value.toFixed(2);
  return future_value;
  //$("future_value").value = calculateFV(investment, interest, years);

};

var processEntries = function() {
  var investment = parseFloat($("investment").value);
  var interest = parseFloat($("interest").value);
  var years = parseFloat($("years").value);


  $("future_value").value = calculateFV(investment, interest, years);

};

window.onload = function() {
  $("calculate").onclick = processEntries;

};

investment: <input id="investment" type="text" value="1000"><br/> 
interest: <input id="interest" type="text" value="8"><br/> 
years: <input id="years" type="text" value="2"><br/> 
future_value: <input id="future_value" type="text" value="" disabled><br/>

<input type="button" id="calculate" value="Calculate">