תחומים
    • הרשמה
    • התחברות
    • חיפוש
    • קטגוריות
    • פוסטים אחרונים
    • משתמשים
    • חיפוש
    חוקי הפורום

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

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

      אני מנסה לכתוב קוד
      שכאשר אני אסמן CHECKBOX :CreateSubscription אז גם ViewSubscription :CHECKBOX נוסף מסומן באופן אוטומטי
      אך מופיעה לי השגיאה הנ"ל
      נראה שהערך של הCHECKBOX נשאר NULL למרות שהדף גמר להטען?
      זה הקוד :

      
              <input type="checkbox" id="ViewSubscription" name="Subscription" value="View Subscription">
              <label for="ViewSubscription"> View Subscription</label><br>
              <input type="checkbox" id="CreateSubscription" name="Subscription" value="Create Subscription" onclick="if (this.checked==true) document.getElementById(ViewSubscription).checked = true">
              <label for="CreateSubscription"> Create Subscription</label><br>
      
      yossiz תגובה 1 תגובה אחרונה תגובה ציטוט 0
      • yossiz
        yossiz @שרה רחל נערך לאחרונה על ידי

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

        document.getElementById(ViewSubscription)

        נראה לי שהשגיאה היא פה
        הפרמטר ל-getElementById אמור להיות מחרוזת. כך:

        document.getElementById("ViewSubscription")
        

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

        ש תגובה 1 תגובה אחרונה תגובה ציטוט 3
        • ש
          שרה רחל @yossiz נערך לאחרונה על ידי

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

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

            @שרה-רחל אם הבנתי נכון, את רוצה להגדיר את הפונקציה מחוץ לרכיב ה-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.

            dovid ש 2 תגובות תגובה אחרונה תגובה ציטוט 4
            • dovid
              dovid ניהול @מוטי אורן נערך לאחרונה על ידי

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                      תגובה 1 תגובה אחרונה תגובה ציטוט 5
                      • מוטי אורן
                        מוטי אורן @dovid נערך לאחרונה על ידי

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

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

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

                        תגובה 1 תגובה אחרונה תגובה ציטוט 3
                        • dovid
                          dovid ניהול נערך לאחרונה על ידי dovid

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

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

                          מוטי אורן yossiz 2 תגובות תגובה אחרונה תגובה ציטוט 2
                          • מוטי אורן
                            מוטי אורן @dovid נערך לאחרונה על ידי מוטי אורן

                            @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
                            • yossiz
                              yossiz @dovid נערך לאחרונה על ידי yossiz

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

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

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

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

                              dovid תגובה 1 תגובה אחרונה תגובה ציטוט 4
                              • dovid
                                dovid ניהול @yossiz נערך לאחרונה על ידי

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

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

                                תגובה 1 תגובה אחרונה תגובה ציטוט 4
                                • 1 / 1
                                • פוסט ראשון
                                  פוסט אחרון
                                בא תתחבר לדף היומי!