日付からインクリメント変数Javascript

Question

こんにちは私は特定の日付から3つの異なる増加する数字を表示する3つの異なるカウンターを使いたいと思います。私はこれをしようと試みてきました：

<script> 
    var START_DATE_1 = new Date("July 18, 2016 10:30:00"); // put in the starting date here 
    var INTERVAL_1 = 5; // in seconds 
    var INCREMENT_1 = 1; // increase per tick 
    var START_VALUE_1 = 0; // initial value when it's the start date 
    var count_1 = 0; 

    window.onload = function() 
    { 
    var msInterval_1 = INTERVAL_1 * 1000; 
    var now_1 = new Date(); 
    count_1 = parseInt((now_1 - START_DATE_1)/msInterval_1) * INCREMENT_1 + START_VALUE_1; 
    document.getElementById('counter_1').innerHTML = count_1; 
    setInterval("count_1 += INCREMENT_1; document.getElementById('counter_1').innerHTML = count_1;", msInterval_1); 
    } 
</script> 

<script> 
    var START_DATE_2 = new Date("July 18, 2016 10:30:00"); // put in the starting date here 
    var INTERVAL_2 = 5; // in seconds 
    var INCREMENT_2 = 1; // increase per tick 
    var START_VALUE_2 = 0; // initial value when it's the start date 
    var count_2 = 0; 

    window.onload = function() 
    { 
    var msInterval_2 = INTERVAL_2 * 1000; 
    var now_2 = new Date(); 
    count_2 = parseInt((now_2 - START_DATE_2)/msInterval_2) * INCREMENT_2 + START_VALUE_2; 
    document.getElementById('counter_2').innerHTML = count_2; 
    setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval_2); 
    } 
</script> 

<script> 
    var START_DATE_3 = new Date("July 18, 2016 10:30:00"); // put in the starting date here 
    var INTERVAL_3 = 5; // in seconds 
    var INCREMENT_3 = 1; // increase per tick 
    var START_VALUE_3 = 0; // initial value when it's the start date 
    var count_3 = 0; 

    window.onload = function() 
    { 
    var msInterval_3 = INTERVAL_3 * 1000; 
    var now_3 = new Date(); 
    count_2 = parseInt((now_3 - START_DATE_3)/msInterval_3) * INCREMENT_3 + START_VALUE_3; 
    document.getElementById('counter_3').innerHTML = count_2; 
    setInterval("count_3 += INCREMENT_3; document.getElementById('counter_3').innerHTML = count_3;", msInterval_3); 
    } 
</script> 

<div id="counter_1"></div> 
<div id="counter_2"></div> 
<div id="counter_3"></div> 

期待とだけ3TDのdiv要素が取り込まれますが、あまりにも予想されるようになりました作業として、これは動作しません（とすぐに、私はページをロードすると、それは私の番号を表示し、数秒後に1から再開してください）。

どういうところが間違っていますか？ JQueryを使わずにどうすればいいですか？

ありがとうございます。

Answer 1

これはSE-CodeReviewのコード解析ではありませんが（コードを分析した後に投稿することを強く推奨します）、エラーは何かを関数に複数回割り当てているというエラーです。したがって、最後の割り当てだけが実際にonloadと呼ばれます。

したがって、最初の<script>タグにwindow.onload = function()を割り当てている場合は、が2番目にを上書きしています。 は、の3番目の<script>タグに再度割り当てられます。

3つの機能をすべて1つの（onload）イベントに割り当てる場合は、この操作を行うことはできません。

---

あなたはその関数の内部で、あなたがあなたのページのonloadを実行しているしたいすべてのコードを追加することができます今すぐ

document.addEventListener("DOMContentLoaded", function() {}); 

を使用し、単一のイベントに対して複数のリスナーを追加したい場合は、別の関数でonloadを実行したかったコードに加えて！

ここでは、クリックリスナーを使用した場合と同じ手法を使用した簡単なデモンストレーションを示します。最初の関数は決して呼び出されないことに注意してください。

document.getElementById("a").onclick = function() { 
 
    alert("I will never alert, because of the next function"); 
 
} 
 
document.getElementById("a").onclick = function() { 
 
    alert("I will alert, because I'm not overriden"); 
 
} 
 

 
document.getElementById("a").addEventListener('click', function() { 
 
    alert("I will alert too"); 
 
}); 
 

 
document.getElementById("a").addEventListener('click', function() { 
 
    alert("And a third alert. Disturbing"); 
 
});

<div id="a">Click me!</div>