ページロード時のJS関数のトリガーが機能していません

Question

ユーザーがデータを入力している間にトリガーされる2つの関数があります。基本的には、選択したオプションの値を加算して出力します。

このフォームでは、特にオプションは事前に設定されています。このため、ファンクションはトリガされておらず、計算はnullのままです。

機能がちょうど</body>

機能の上に表示されています

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

私も持っている：

$(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)); 
     } 
     } 

コードは、それらを試してみて、トリガする機能の下に配置しました試しました：

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

ページが読み込まれたときに、これら2つの機能をどのように起動できますか？どうもありがとう。

Answer 1

アイテムが事前入力されていても、DOM readyはonchangeイベントをトリガーしません。
したがって、あなたのようなビットをあなたのスクリプトを変更する必要があります。

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：上記のビットが改善されている場合でもところで、それは1つのID #input要素の上eachを使用してループにあまり意味がありますが - 私はあなたにそれを残すでしょう...