$ (document) .ready에 함수 호출을 전달하면 변수가 NaN이됩니다.

Question

이 코드가 spentScores을 NaN으로 반환하는 이유는 무엇입니까?

$(document).ready(initScores()); 
 

 
var lvlScores = 0; 
 
var currentScores = 0; 
 
var spentScores = 0; 
 

 
function initScores() { 
 
    console.log(spentScores); 
 
    console.log(spentScores + 44); 
 
    console.log(lvlScores); 
 
    initLvlScores(); 
 
    initSpentScores(); 
 
    initCurrentScores(); 
 
} 
 

 
function recountLvlScores() { 
 
    initScores(); 
 
    clearStatistics(); 
 
} 
 

 
function initLvlScores() { 
 
    var lvl = parseInt($('.lvl-select').val()); 
 
    switch (lvl) { 
 
    case 1: 
 
     lvlScores = 1000; 
 
     break; 
 
    case 2: 
 
     lvlScores = 1200; 
 
     break; 
 
    case 3: 
 
     lvlScores = 1500; 
 
     break; 
 
    case 4: 
 
     lvlScores = 2000; 
 
     break; 
 
    case 5: 
 
     lvlScores = 3000; 
 
     break; 
 
    } 
 
} 
 

 
function initSpentScores() { 
 
    $('.statistics').each(function() { 
 
    console.log("!!" + spentScores + parseInt($(this).val())); 
 
    console.log("!!" + parseInt($(this).val())); 
 
    spentScores = spentScores + parseInt($(this).val()); 
 
    }); 
 
} 
 

 
function initCurrentScores() { 
 
    currentScores = lvlScores - spentScores; 
 
    $('.scores').html(currentScores); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

콘솔 :

scoresEditCounting.js:9 undefined 
scoresEditCounting.js:10 NaN 
scoresEditCounting.js:11 undefined 
scoresEditCounting.js:40 !!undefined44 
scoresEditCounting.js:41 !!44 
scoresEditCounting.js:40 !!NaN44 
scoresEditCounting.js:41 !!44 

Answer 1

업데이트이 라인 :

$(document).ready(initScores()); 

이 사람 :

$(document).ready(initScores); 

준비가되었을 때 기능 호출 페이지를 원하게됩니다. 그렇지 않으면 페이지가 준비되기 전에 DOM 요소에 액세스하려고합니다.