check box error: Uncaught TypeError: Cannot set property 'checked' of nul

[dovid]

@מוטי-אורן או להחליף את המילה this בcreateSubscription.

[שרה רחל]

@מוטי-אורן
מתי מסמנים #?
באופן כללי בJS

[מוטי אורן]

@שרה-רחל אמר בcheck box error: Uncaught TypeError: Cannot set property 'checked' of nul:

@מוטי-אורן
מתי מסמנים #?
באופן כללי בJS

את מתכוונת בתפיסת אלמנטים מתוך ה - HTML?

אז בעיקרון במתודה getElementById שמביאה את האלמנט לפי ה - ID, לא מסמנים ב-#. אבל ב - querySelector כן צריך לסמן במידה והמטרה היא לתפוס אלמנט באמצעות ה-ID. (הסיבה היא משום שהמתודה querySelector מקבלת סלקטורים של CSS, וב -CSS תופסים ID עם סולמית). אגב, המתודה הזאת מביאה את האלמנט הראשון בדף שמתאים לסלקטור. אם את רוצה לתפוס את כל האלמנטים שמתאימים לסלקטור, בסלקטור של קלאס לצורך העניין, תצטרכי להשתמש ב - querySelectorAll שמחזירה מערך עם כל האלמנטים שמתאימים לסלקטור הזה.

[שרה רחל]

@מוטי-אורן
אם יש לי כמה אלמנטים מסוג CHECKBOX, בשביל לאגד אותם משתמשים ב CLASS ואז יש לי אפשרות לתפוס אותם querySelectorAll ? והאם גם אז אצטרך להשתמש ב#?

או שניתן בעצם לאגד אותם בNAME משותף ולתפוס אותם בgetElementByName?

[מוטי אורן]

@שרה-רחל בעיקרון אם יש להם name משותף אז את יכולה להשתמש ב-getElementsByName כמו שאמרת, ולא תצטרכי קלאס.

שימי לב שב - querySelectorAll לא שמים סולמית #, כי אין אפשרות לאפיין באותו ID יותר מאלמנט אחד במסמך (וסולמית שמים רק במקרה של ID). אלא את הסלקטור המתאים שזה במקרה של קלאס, נקודה ושם הקלאס ככה: 'className.'

גם getElementsByName וגם querySelectorAll מחזירים מערך של אלמנטים, ואפשר לטפל בהם באמצעות לולאות וכדו'.

אגב, גם ב querySelectorAll אפשר לתפוס את האלמנטים באמצעות ה - name שלהם, בערך כך:

document.querySelectorAll('[name="nameOfElements"]')

כמו שכבר הזכרתי, המתודה הזאת מקבלת סלקטור של CSS. וזאת הדרך לתפוס אלמנטים ב CSS על ידי ה - name שלהם (מה שידוע לי זאת הדרך היחידה. אולי יש עוד? אני לא מכיר).
אבל לדעתי אם את תופסת את האלמנטים באמצעות ה-name שלהם, עדיף כבר להשתמש ב-getElementsByName, כי זה יותר קריא ונורמלי. פשוט לשים את ה-name כארגומנט וזהו, בלי להסתבך.

[מוטי אורן]

@dovid אמר בcheck box error: Uncaught TypeError: Cannot set property 'checked' of nul:

@מוטי-אורן או להחליף את המילה this בcreateSubscription.

כעיקרון אתה צודק, אבל בקוד שהיא הביאה כתוב this אז חשבתי שזה חשוב להדגיש את העניין.

[dovid]

אני מצרף פה דוגמה להאזנה לאירוע לפי קלאס
https://plnkr.co/edit/080e8xO3gCJNCxKh

[מוטי אורן]

@dovid קוד מצויין! רק אם יורשה לי הקטן הערה קטנה..

כשקיימים כמה אלמנטים תחת אלמנט אב אחד וצריך להאזין לאותו אירוע אצל כולם, לפי מה שידוע לי עדיף יותר להאזין לאירוע אצל אלמנט האב, ולא להצמיד אותו בלולאה לכל אותם אלמנטים. בכל אופן זה מה שיצא לי (עושה בדיוק את אותו דבר, רק באמצעות האזנה לאלמנט האב body).

<script>
      document.body.addEventListener('change', onCheckboxChange)

      function  onCheckboxChange(e){
        console.log(e.target)
          document.getElementById('response').innerText = e.target.dataset.content + ": " + e.target.checked;
      }
</script>

[yossiz]

@dovid אני רואה ששינית את האירוע מ-click ל-change.
גם אני חשבתי שיותר נכון ככה. אז הלכתי לבדוק את הנושא ולמדתי משהו
יש שני הבדלים בין אירוע change לאירוע click (ספציפית בנוגע ל-checkbox)

• ב-click אפשר לקרוא preventDefault ואז השינוי סטטוס לא יקרה. (הדבר הזה קצת תמוה אצלי, כי בתוך הפונקציה עצמה הערך של checked מעודכן לערך החדש. אבל אם תקרא preventDefault השינויים יוחזרו אחורה אחרי גמר הפונקציה. בתוך הפונקציה, גם אחרי הקריאה ל-preventDefault הערך של checked הוא עדיין חיובי)
• האירוע של click תמיד קורה מיד. לעומת האירוע של change שב-ie (ימ"ש) זה קורה רק כאשר הפוקוס יוצא מהאלמנט.

ראיתי שממליצים (בעיקר בגלל הסיבה השנייה) להשתמש ב-click.

[dovid]

@yossiz זה הפתעה עבורי שclick לוכד שינוי גם באמצעות המקלדת.
ובהשוואה שערכת החסרת את האירוע input שאינני מבין מה מעלותיו ומה חסרונותיו.