ריבוי SetIntervals

yyy

נניח שיש לי 2 אלמנטים:

<h1 id="text1">9</h1>
<h1 id="text2">9</h1>

כעת אני רוצה שהמספר שלהם ירד ויעלה מידי שניה. הקוד לכאורה אמור להיות כזה:

for (var i = 1; i < 3; i++)    {
     var elId = "text" + i;
     setInterval(function() {
         changeNamber(elId);
     }, 1000);
 }

הבעיה היא שהוא לא עובד.
אם אני מוריד ב-for את הערך של 3 ל-2, הוא עובד רק על אלמנט

id="text1"

אני מסיק מזה שהקוד תקין.
השאלה למה שאני מריץ אותו יותר מפעם אחת הוא מפסיק לעבוד?
תודה רבה.

yossiz

@yyy אמר בריבוי SetIntervals:

הבעיה היא שהוא לא עובד.

מה קורה? כלום? הייתי מצפה שפונקציית changeNamber תרוץ פעמיים על האלמנט השני וכלל לא על הראשון.
ההסבר:
הסקופ של מתשנה שהוצהרה עם מילת var היא כל הפונקציה ולא רק הבלוק שבו הצהרת עליו. הצהרה שנייה של משתנה בשם זהה עם מילת var לא יוצרת משתנה חדשה.
באיטרציה השנייה של הלולאה אתה עושה השמה למשתנה (הגלובלית לפונקציה זו) elId לערך text2 לכן גם הפונקציה שתזמנת באיטרציה הראשונה וגם באיטרציה השנייה - שניהם פועלים על האלמנט עם ה-id של text2.

כיום השימוש במילת var לא מומלץ בגלל בעיות אלו (ועוד) ומומלץ להשתמש במקום זה במילת let שיש לו התנהגות ידידותית יותר. הסקופ שלו הוא הבלוק שבו הוא מוצהר. (וגם הצהרה חוזרת גורמת לשגיאה). אם היית משתמש ב-let - כל איטרציה של הלולאה היתה מקבלת מופע שונה של המשתנה elId ובכך פתרת את הבעיה

yyy

@yossiz אמר בריבוי SetIntervals:

מה קורה? כלום? הייתי מצפה שפונקציית changeNamber תרוץ פעמיים על האלמנט השני וכלל לא על הראשון.

הטעות שלי הייתה שהצבתי את 2 האלמנטים על אותו ערך, ואכן הפקודה רצה פעמיים על אלמנט text2, אלא שהערך היה נראה שלא השתנה כי התבצע על יו 1+ ואז 1-.
מצורפת למטה הפונקציה changeNamber.
בכל אופן הפתרון של let אכן מועיל. הנה הקוד.

for (var i = 1; i < 3; i++) {
      let elId = "text" + i;
      setInterval(function() {
          changeNamber(elId);
      }, 1000);
  }

פונקצית changeNamber

function changeNamber(elId) {
       var x = document.getElementById(elId).innerText;
       if (x == 9) {
           x++;
       } else {
           x--;
       }
       document.getElementById(elId).innerText = x;
   }

תודה רבה!