関数内の変数名を繰り返します。

Question

私のページにはいくつかのカウントダウンがあり、私はいくつかのカウントダウンを表示するために元のスクリプトを繰り返し処理するように修正しました。例えば

私は<div id="dateHere1"></div>、<div id="dateHere2"></div>、<div id="dateHere3"></div>などでカウントダウンを持っている...

私は1から10どのように数字で以下の機能を反復処理する必要がある理由です私は、文字列strを追加することができます（これは私の関数内で変数名に10）？

var str = 10; 
 

 
for (i = 0; i < str; i++) { 
 
    addEventsHereAndThere([i]); 
 

 
} 
 

 

 

 
function addEventsHereAndThere(number) { 
 
// Set the date we're counting down to 
 
var theCorrectDate.number = document.querySelector('#thisIsTheDate'.number).value; 
 
var countDownDate.number = new Date(theCorrectDate.number).getTime(); 
 

 
// Update the count down every 1 second 
 
var x.number = setInterval(function() { 
 

 
    // Get todays date and time 
 
    var now = new Date().getTime(); 
 
    
 
    // Find the distance between now an the count down date 
 
    var distance.number = (countDownDate.number) - now; 
 
    
 
    // Time calculations for days, hours, minutes and seconds 
 
    var days.number = Math.floor(distance.number/(1000 * 60 * 60 * 24)); 
 
    var hours.number = Math.floor((distance.number % (1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
 
    var minutes.number = Math.floor((distance.number % (1000 * 60 * 60))/(1000 * 60)); 
 
    var seconds.number = Math.floor((distance.number % (1000 * 60))/1000); 
 
    
 
    // Output the result in an element with id="demo" 
 
\t if (days.number == 0 && hours.number == 0 && minutes.number == 0) { 
 
\t \t document.getElementById("dateHere".number).innerHTML = seconds.number + "s"; 
 
\t } else if (days.number == 0 && hours.number == 0) { 
 
\t \t document.getElementById("dateHere".number).innerHTML = minutes.number + "m " + seconds.number+ "s"; 
 
\t } else if (days.number == 0) { 
 
\t \t document.getElementById("dateHere".number).innerHTML = hours.number + "t " 
 
    \t + minutes.number + "m " + seconds.number+ "s"; 
 
\t } else { 
 
    document.getElementById("dateHere".number).innerHTML = days.number+ "d " + hours.number + "t " 
 
    + minutes.number + "m " + seconds.number + "s"; 
 
\t } 
 
    
 
    // If the count down is over, write some text 
 
    if (distance.number < 0) { 
 
     clearInterval(x.number); 
 
\t \t document.getElementById("dateBackgroundHere".number).style = "position:absolute; bottom:0; height:45px; width:100%; background: rgba(230, 47, 47, 0.8); color:#fff; font-family: Fira Sans, sans-serif; font-size: 12px; font-weight: bold; padding-top: 8px;"; 
 
     document.getElementById("dateHere".number).innerHTML = "UDLØBET"; 
 
    } 
 
}, 1000); 
 
}

Answer 1

2つのことが飛び出す：関数に渡すとき

1. は、配列でそれをラップしないでください：有効

   addEventsHereAndThere(i); 
   // No [] here --------^ 
   

2. 使用それを使用するときのJavaScript（PHPではない）文字列の連結：

   ... = document.querySelector('#thisIsTheDate' + number).value; 
   // + not . here ------------------------------^ 
   

---

サイドノート：ちょうどそのIDによって要素を選択するとき、あなたは、querySelectorよりも（それはID、いないセレクタがかかるので#なし）getElementByIdを使用したほうが良いですので、 ：

... = document.getElementById('thisIsTheDate' + number).value; 

はるかに高速、彼らは同じ結果になってしまいますが、getElementByIdがずっとあります。 （それほど頻繁に問題になることはありません）