Passer l'appel de la fonction à $ (document) .ready provoque une variable NaN

Question

Pourquoi ce code renvoie-t-il spentScores comme 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>

Console:

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

Mise à jour cette ligne:

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

à ceci:

$(document).ready(initScores); 

Vous souhaitez que la page appelle la fonction lorsqu'elle est prête. Sinon, vous essayez d'accéder aux éléments DOM avant que la page ne soit prête.