דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תוכנה
  3. check box error: Uncaught TypeError: Cannot set property 'checked' of nul

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

מתוזמן נעוץ נעול הועבר תוכנה
14 פוסטים 4 כותבים 388 צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • מוטי אורןמ מנותק
    מוטי אורןמ מנותק
    מוטי אורן
    השיב לשרה רחל ב נערך לאחרונה על ידי מוטי אורן
    #4

    @שרה-רחל אם הבנתי נכון, את רוצה להגדיר את הפונקציה מחוץ לרכיב ה-HTML (כלומר, שלא על ידי ה-onclick).

    מה שאת צריכה לעשות זה להגדיר את הסקריפט בתוך תגית סקריפט נפרדת, ושם לתפוס את האלמנטים באמצעות document.querySelector כמו בדוגמה להלן, שתפקידו הוא לתפוס אלמנטי HTML עם סלקטורים של CSS, או באמצעות document.getElementById כמו שאת כתבת.

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

        <script>
            const viewSubscription = document.querySelector('#ViewSubscription');
            const createSubscription = document.querySelector('#CreateSubscription');
            createSubscription.addEventListener('click', function () {
                if (this.checked) viewSubscription.checked = true;
            })
        </script>
    

    צריך לשים לב לא להשתמש בקולבק כאן ב- arrow function (פונקציית חץ) מהסיבה שה-this שמתקבל בפונקציית חץ הוא מהסקופ הגלובאלי של window ולא מה-checkbox.

    dovidD ש 2 תגובות תגובה אחרונה
    4
    • dovidD מנותק
      dovidD מנותק
      dovid ניהול
      השיב למוטי אורן ב נערך לאחרונה על ידי
      #5

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

      מנטור אישי למתכנתים (ולא רק) – להתקדם לשלב הבא!

      בכל נושא אפשר ליצור קשר dovid@tchumim.com

      מוטי אורןמ תגובה 1 תגובה אחרונה
      4
      • ש מנותק
        ש מנותק
        שרה רחל
        השיב למוטי אורן ב נערך לאחרונה על ידי
        #6

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

        מוטי אורןמ תגובה 1 תגובה אחרונה
        1
        • מוטי אורןמ מנותק
          מוטי אורןמ מנותק
          מוטי אורן
          השיב לשרה רחל ב נערך לאחרונה על ידי
          #7

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

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

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

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

          ש תגובה 1 תגובה אחרונה
          4
          • ש מנותק
            ש מנותק
            שרה רחל
            השיב למוטי אורן ב נערך לאחרונה על ידי שרה רחל
            #8

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

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

            מוטי אורןמ תגובה 1 תגובה אחרונה
            1
            • מוטי אורןמ מנותק
              מוטי אורןמ מנותק
              מוטי אורן
              השיב לשרה רחל ב נערך לאחרונה על ידי מוטי אורן
              #9

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

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

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

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

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

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

              תגובה 1 תגובה אחרונה
              5
              • מוטי אורןמ מנותק
                מוטי אורןמ מנותק
                מוטי אורן
                השיב לdovid ב נערך לאחרונה על ידי
                #10

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

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

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

                תגובה 1 תגובה אחרונה
                3
                • dovidD מנותק
                  dovidD מנותק
                  dovid ניהול
                  כתב ב נערך לאחרונה על ידי dovid
                  #11

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

                  מנטור אישי למתכנתים (ולא רק) – להתקדם לשלב הבא!

                  בכל נושא אפשר ליצור קשר dovid@tchumim.com

                  מוטי אורןמ yossizY 2 תגובות תגובה אחרונה
                  2
                  • מוטי אורןמ מנותק
                    מוטי אורןמ מנותק
                    מוטי אורן
                    השיב לdovid ב נערך לאחרונה על ידי מוטי אורן
                    #12

                    @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>
                    
                    תגובה 1 תגובה אחרונה
                    2
                    • yossizY מנותק
                      yossizY מנותק
                      yossiz
                      השיב לdovid ב נערך לאחרונה על ידי yossiz
                      #13

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

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

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

                      📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

                      dovidD תגובה 1 תגובה אחרונה
                      4
                      • dovidD מנותק
                        dovidD מנותק
                        dovid ניהול
                        השיב לyossiz ב נערך לאחרונה על ידי
                        #14

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

                        מנטור אישי למתכנתים (ולא רק) – להתקדם לשלב הבא!

                        בכל נושא אפשר ליצור קשר dovid@tchumim.com

                        תגובה 1 תגובה אחרונה
                        4

                        בא תתחבר לדף היומי!
                        • התחברות

                        • אין לך חשבון עדיין? הרשמה

                        • התחברו או הירשמו כדי לחפש.
                        • פוסט ראשון
                          פוסט אחרון
                        0
                        • דף הבית
                        • קטגוריות
                        • פוסטים אחרונים
                        • משתמשים
                        • חיפוש
                        • חוקי הפורום