javascript - 如何创建 javascript 表并从输入中获取计算结果作为表数据

标签 javascript html

我正在使用 Javascript 创建一个表。我有2个输入;本金额和年利率。如何创建一个循环,将输出放入 10 年期表中,并采用本金+复利利率。我不被允许使用jquery。

**我试图将结果显示为基于本金和利息(复利)的增加金额的表格; Year 1 Year 2 Year 3 Year 4 Year 5 1100 1210 1331 1464 1610(表格中的10年,第一行是1年到10年,第二行是金额,抱歉我不知道如何在此处添加图片)

这是我到目前为止所开始的表单输入;

<!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>

最佳答案

您可以设置一个空 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;
}

公式不正确,我不知道你要计算什么。这只是向您展示每年您会获得多少利息。

关于javascript - 如何创建 javascript 表并从输入中获取计算结果作为表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40290618/

相关文章:

javascript - setValue to QUERY() 公式不起作用?

javascript - 隐形谷歌 Recaptcha 和 ajax 形式

javascript - 如何在 IE11 上检测元素大小调整; element.onresize 事件的替代方案?

javascript - 在 AngularJS 中通过模态编辑对象 - 使用临时对象?

html - Flexbox - 每行可容纳 2,3 或 1 件元素

javascript - HTML 转 PDF(带日语)

javascript - 使用 captureVisibleTab 确定窗口像素密度?

php - 混合 PHP 和 HTML 时集成清洁代码

html - 在 HTML5 或 svg 文件或 css 中缩放 SVG

html - Css bootstrap 响应问题