2013-10-02 3 views
1

현재 "은퇴 계산기"에서 일하고 있습니다. 여기서 나는 처음 두 가지 양식에 입력 된 데이터를 기반으로 매년 돈을 절약 할 수있는 테이블을 생성해야합니다. 불행히도 왜 사이트에 테이블을 추가하지 않는지 알 수 없습니다. 콘솔에 오류가 발생하지 않습니다.JQuery가 html로 추가되지 않습니다.

저는 JS/JQ의 초보자이기도합니다. 계산을위한 코드는 맨 아래에 있습니다. 나는 그것이 장소 전체에 거의 볼지도 모르지 않는다는 것을 깨닫는다, 나는 그것이 돌아오고 약간을 청소하기 전에 그것이 일하기 위하여 지금 얻는 것을 시도하고있다.

편집 : 일부 방법을 사용하여 트래버스 할 방법이 너무 많습니다. calculate와 관련된 변수가 실제 값 (일명 null/NaN이 아닙니다)으로 설정되어 있다고 가정합니다. 예를 들어 더 많은 시나리오를 추가하는 JQuery 메서드가 추가되었습니다. 그러나 문제가 산만 해지기 때문에 나는 그것을 꺼냈다. 몸에 id가 아니라 태그하지만 루프에 대한, 당신은 getElementsByTagName('body')[0]을 사용해야합니다 당신은 getElementById('body') 사용하고있는 배열

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> 

답변

2

, 관련 실행됩니다. 또는 이미 jQuery를 사용하고 있으므로 더 나은 것은 아직 $('body')입니다.

+0

그래, 내가 얼마나 바보인지 설명하는 답변을 게시하려했다. – sreya

관련 문제