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

שרה רחל

אני מנסה לכתוב קוד
שכאשר אני אסמן 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

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

document.getElementById(ViewSubscription)

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

document.getElementById("ViewSubscription")

שרה רחל

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

מוטי אורן

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

@מוטי-אורן או להחליף את המילה 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 שאינני מבין מה מעלותיו ומה חסרונותיו.