$（document）.readyへの関数呼び出しを渡すと変数がNaNになる

Question

なぜこのコードはNaNとしてspentScoresを返しますか？

$(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要素にアクセスしようとしています。