如何创建一个javascript表并从输入中获取计算作为表数据

时间:2016-10-27 17:16:17

标签: javascript html

我正在使用Javascript创建一个表。我有2个输入;原则金额和年利率。如何使用原则+复利率创建一个输出为10年表的循环。我不允许使用jquery。

**我试图根据原则和兴趣(复利)将结果显示为增加数量的表格; 1年级2年级3年级4年级5 1100 1210 1331 1464 1610(表中10年,第1行是1年级到10年级,第2行是金额,抱歉我不知道如何在这里添加图片)< / p>

以下是我目前为表单输入开始的内容;

<!DOCTYPE html>
<html>

  <head>
    <title>Savings Account Calculator</title>   

  </head>

  <body>
    <h1>Savings Account Calculator</h1>

  <p>

    <form name="savingdata">
    <table>

    <tr>
    <td>Principle Amount:</td> 
    <td><input type="text" id="principle" value="1000" /></td>
    </tr>

    <tr>
    <td>Annual Interest (%):</td> 
    <td><input type="text" id="interest" value="10" /></td>
    </tr>

    </table>
    <br>
    <input type="button" onClick="calculateBy()" Value="Calculate" />
    </form>
    <br>
  </p>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

我真的不知道你想要做什么但是使用这个javascript,你会在calculateBy函数中得到你感兴趣的两个值。由你来做出正确的计算。

function calculateBy() {
  var interest = document.getElementById("interest").value;
  var principle = document.getElementById("principle").value;

  alert("Interest: "+interest+", principle: "+principle);
 /* calculation here */
}

jsFiddle这里:https://jsfiddle.net/1L69msya/1/

答案 1 :(得分:0)

您可以设置一个空div并使用表格或其他HTML元素,并使用该元素填充结果。

JSFiddle - https://jsfiddle.net/xjj7vook/

function calculateBy() {

  var principle = document.getElementById('principle').value;
  var interest = document.getElementById('interest').value;
  interest = 1 + (interest / 100); //convert to dec
  var tableHTML = "<table>";
  alert(interest);
  var total = principle;
  for (i = 1; i < 10; i++) {
    var res = principle * (Math.pow(interest, i));
    res = res.toFixed(2);
    interestgained = +res - +principle;
    interestgained = interestgained.toFixed(2);
    tableHTML = tableHTML + "<tr>Year " + i + " | Principle: " + principle + " USD | Total: " + res + " USD | Interest: " + interestgained + " USD</tr><br>";
  }

  tableHTML = tableHTML + "</table>";
  alert(tableHTML);
  document.getElementById("someDIV").innerHTML = tableHTML;
}

公式不正确,我不知道你想要计算什么。这个只是告诉你每年你会获得多少兴趣。