Le déclenchement des fonctions JS au chargement de la page ne fonctionne pas

Question

J'ai deux fonctions qui sont déclenchées pendant que l'utilisateur entre des données. Ils additionnent essentiellement les valeurs des options qu'ils choisissent et les produisent.

Sur ce formulaire, en particulier, les options sont déjà préremplies. Pour cette raison, les fonctions n'ont pas été déclenchées, laissant leur calcul comme null.

Les fonctions sont présentés juste au-dessus </body>

Fonctions:

$(calculateScore); 
     function calculateScore() { 
     var fields = $('.form-group #input').change(calculate); 

     function calculate() { 
      var score = 0; 
      fields.each(function() { 
      score += +$(this).val(); 
      }); 
      $('#score').html(score.toFixed(0)); 
     } 
     } 

     $(calculateHiddenScore); 
     function calculateHiddenScore() { 
     var fields = $('.form-group #input').change(calculate); 

     function calculate() { 
      var score = 0; 
      fields.each(function() { 
      score += +$(this).val(); 
      }); 
      $('#hidden_score').val(score.toFixed(0)); 
     } 
     } 

code placé sous les fonctions pour essayer de les déclencher:

$(function() { 
    calculateHiddenScore(); 
    calculateScore(); 
}); 

et j'ai aussi essayé:

Comment puis-je déclencher ces deux fonctions lorsque la page a chargé s'il vous plaît?

window.onload = function() { 
    calculateScore(); 
    calculateHiddenScore(); 
}; 

Merci beaucoup.

Answer 1

DOM prêt ne déclenchera pas d'événement onchange même si vos éléments sont pré-remplis.
Par conséquent, vous devez modifier un peu votre script comme:

function calculateScore() { 
    var fields = $('.form-group #input'); // Cache only! 

    function calculate() { 
    var score = 0; 
    fields.each(function() { 
     score += +$(this).val(); 
    }); 
    $('#score').html(score.toFixed(0)); 
    $('#hidden_score').val(score.toFixed(0)); 
    } 

    calculate();     // Calculate ASAP (on DOM ready) 
    fields.on("change", calculate); // and also on change 
} 


jQuery(function($) { // DOM is ready and $ alias secured 
    calculateScore(); // Trigger 
    // other jQuery code here 
}); 

PS: BTW même si ce qui précède est un peu amélioré, cela n'a pas beaucoup de sens de boucle en utilisant each sur un seul ID élément #input - Je vais vous laisser ...