2

目前正在开发一个“退休计算器”，我必须根据前两个表格中输入的数据为每年节省的钱生成一个表格。不幸的是，我无法弄清楚为什么它没有将表格附加到站点。我在控制台上没有收到任何错误。

我也是 JS/JQ 的新手。计算代码在底部附近。我意识到它可能看起来到处都是，我试图在我回来之前先让它工作并清理一些。

编辑：我拿出了一些方法，所以没有太多要遍历的东西。假设计算中涉及的变量设置为实际值（也不是 null/NaN）。例如，有一个 add JQuery 方法可以添加更多场景。但是因为它分散了我对问题的注意力，所以我把它拿出来了。但是 for 循环相对于数组运行

var scenarioCount=0;
var hasError=false
var error=false;
var YOB;
var CurrSav;
var RetAge;
var LifeExp;
var Year;
var scenarios = new Array();

$(document).ready(function ()
{
    $('#calculate').on('click', function(e)
    {
        if(!isBasicInfoValid()) //check to see if basic info is correct
        {
            if(!error) //if there isn't already an error put one 
            {
                $('#basic').append($("<div class='basicError'>Input is not valid! </div>")); 
            }
            resetVars(); //reset the variables
            error=true; //say there is an error on screen
        }
        else
        {
            $("#basic .basicError").remove();   
            error=false;
            calculate();
        } 
        e.preventDefault();
    });
});
function calculate()
{
    var body = document.getElementById('body');
    //body is null right here for some reason

    $(body).append("<div id='results' class='form'>");
    for(var i=0;i<scenarios.length;i++)
    {
        var element = scenarios[i];
        var n = parseInt(YOB)+parseInt(RetAge)-Year;
        var m = LifeExp-RetAge;
        var r = 1+element.workRate;
        var g = 1 + element.retiredRate;
        var I = CurrSav;
        var T = element.retIncome;
        var part1 = (T/Math.pow(g,m-1))*((1-Math.pow(g,m))/(1-g))-(I*Math.pow(r,n));
        var S = part1*(1-r)/(1-Math.pow(r,n));
        var savings=I;
        $('#results').append("<div><h4>You need to save "+S+" dollars</h4></div>")
        $('#results').append("<table id=t><tr><th>Year</th><th>Money Saved</th></tr>");

        for(var j=n;j>0;j--)
        {
            savings=S+savings*r;
            $('#t').append("<tr><td>"+j+"</td><td>"+savings+"</td></tr>")
        }
        for(var j=m;j>0;j--)
        {
            savings=(savings-T)*g;
            $('#t').append("<tr><td>"+j+"</td><td>"+savings+"</td></tr>")
        }
        $('#results').append("</table></div>");
    }   
};
function resetVars()
{
    YOB=null;
    CurrSav=null;
    RetAge=null;
    LifeExp=null;
    Year=null;
}
function scenarioObject()
{
    var obj={
        nameScen : document.forms["scenario"]["ScenarioName"].value,
        workRate : document.forms["scenario"]["Working"].value,
        retiredRate : document.forms["scenario"]["Retired"].value,
        retIncome : document.forms["scenario"]["desiredInc"].value
    }
    return obj;
}

<!DOCTYPE html>
<html>
<head>
    <title>Assignment 3</title>
    <link rel='stylesheet' type='text/css' href='/uncSemester7/comp426/a3/assignment3.css'>
    <script src='/uncSemester7/comp426/a3/jquery-1.10.2.js'></script>
    <script src='/uncSemester7/comp426/a3/assignment3.js'></script>
</head>
<body>
    <div class='form'>
        <h3> Basic Information </h3>
        <form id='basic'>
            <div>Year of Birth: <input type='number' name='YOB'> </div> 
            <div>Current Savings: <input type='number' name='CurrSav'> 
            </div>  
            <div>Expected Retirement Age: <input type='number' name='RetAge'></div>     
            <div>Life expectancy: <input type='number' name='LifeExp'>
            </div>  
        </form>
    </div>
    <div id='scenDiv' class='form'>
        <div id='buttons'>
            <div><button id='add' type='submit'>Add Scenario </button></div>
            <div><button id='calculate' type='submit'> Calculate </button></div>
        </div>
        <h3> Scenario </h3>
        <form id='scenario'>
            <div>Name: <input type='text' name='ScenarioName'> </div>
            <div>Rate of Investment Return (While Working): <input type='number' name='Working'></div>
            <div>Rate of Investment Return (Retired): <input type='number' name='Retired'></div>
            <div>Desired Retirement Yearly Income: <input type='number' name='desiredInc'></div>
        </form>     
    </div>
</body>
</html>
4

1 回答 1

2

您正在使用getElementById('body')，应该在哪里使用getElementsByTagName('body')[0]，因为 body 不是 id，而是标签。或者更好的是使用 jQuery，因为您已经在使用它，$('body').

于 2013-10-02T23:12:24.407 回答