אירוע על class

גמליאל

(כבר שאלתי כאן כמה שאלות שקשורים לאירועים בJS, אני מתקשה מאוד בהבנת הנושא ומקווה שתסלחו לי).
כיצד ניתן לקשר אירוע מסויים על class של אלמנטים, אך שכל אירוע יהיה מתאים לאלמנט שעליו הוא מתבצע.
לשם דוגמא, נניח יש לי לוח הכפל ואני רוצה שבכל לחיצה על אחד ממשבצות הלוח תופיע הודעה על הדפדפן עם המספר שמופיע במשבצת עליו לחצתי.
מה שעשיתי זה לתת לכל אחד ממשבצות הטבלה (<td>) מזהה id משלו, כמספר אשר מופיע באותה משבצת. ואז:

a = document.getElementByClassName("meshbezet");
for (i=0;i<a.lenght;i++){
b = document.getElementById(i);
b.addEventListener(...)
}

אז חוץ מהבעיה הקטנה שהקוד לא עובד לי (Cannot read property 'addEventListener' of null) אני מבין שיש גם דרכים פשוטות ונכונות יותר.
JS טהור, בלי jquery.

יוסף בן שמעון

הקוד לא עובד כי לא הצמדת אותו לאלמנט הנכון.
שים לב, כדי לראות על מה אתה מצביע, תדפיס לקונסול את המשתנה i בתוך הלולאה, ותראה שזה סה"כ מספר פשוט ולא אלמנט DOM (אלמנט DOM = אלמנט HTML, דיב, פסקה וכדומה)

a = document.getElementByClassName("meshbezet");
for (i=0;i<a.lenght;i++){
console.log(i); \\מספר פשוט - מונה הלולאה
console.log(a[i]); \\ אלמנט DOM שאליו אתה מעוניין להצביע
}

למעשה אחרי שאתה מצביע על האלמנט הנכון בתוך הלולאה, אתה לא צריך להשתמש במתודה getElementById, כי באמת המתודה הזו מקבלת פרמטר מחרוזת את השם של ה ID, ואתה מעביר לה או מספר או אלמנט DOM, לכן זה מחזיר לך שגיאה. חוץ מזה שהמתודה הזו אמורה להחזיר לך מצביע לאלמנט, וזה מיותר כי כבר יש לך מצביע...
אתה צריך לכתוב כך בתוך הלולאה:

b = a[i]
id = a[i].id
b.addEventListener(/**/)

יוסף בן שמעון

@גמליאל הדרכים הפשוטות והנכונות יותר, כנראה כוונתך להצמיד אירוע לאלמנט תוך כדי שאתה יוצר אותו.

לדוגמא, אם אתה עושה 10 כפתורים:

for(let i = 0; i<10; i++){
    let button = document.createElemet('button')
    document.body.appendChild(button)
}

ובכל כפתור אתה רוצה להצמיד אירוע לחיצה, שיקפיץ אלרט עם המספר של הכפתור, אז במקום לתת לכל כפתור ID ולהשתמש בו, אתה יכול תוך כדי יצירת הכפתור להצמיד לו את האירוע כך:

for(let i = 0; i<10; i++){
    let button = document.createElement('button')
    button.addEventListener('click', function(){ alert(i) })
    document.body.appendChild(button)
}

ש.ב.ח.

@גמליאל
לא כל כך הבנתי מה התשובות הארוכות כאן, בגדול זה עבד לי.

    var a = document.getElementsByClassName('className');
        for (let i = 0; i<a.length; i++){ 
            a[i].addEventListener('click',function(e){
                alert(e.target.textContent);
            });
        }

לעומת האורך... בJquery זה כך:

$('.className').click(function(e){
            alert($(this).text());
        })

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

אירוע על class