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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@שרה-רחל נאמרו פה תשובות מצויינות, מה אני כבר יכול להוסיף... אבל כעיקרון את יכולה גם להזריק את האלמנטים בצורה דינאמית לדף באמצעות אובייקט ה-DOM, ע"י האזנה לאירוע הלחיצה על הקישורים שבדף. אני מתכוון לרעיון בסגנון של זה:

const homePageButton = document.getElementById('home-page-button');
const aboutButton = document.getElementById('about-button');

homePageButton.addEventListener('click', createHomePageElements)
aboutButton.addEventListener('click', createAboutPageElements)

function createHomePageElements() {
  // הקוד שמוסיף את האלמנטים הנצרכים לדף הבית
}

function createAboutePageElements() {
   //הקוד שמוסיף את האלמנטים הנצרכים לדף האודות 
}

@נ-נח לא נראה לי שאפשר, בכל מקרה זו שאלה מעניינת