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

הנה דוגמא קטנה שמבוססת על קוד שראיתי היום בקורס. שימו לב ל HTML הבא:

<label>
  Stuff
  <table>
    <tr>
      <td>One</td>
      <td><button onClick="alert('one')">Ouch!</td>
    </tr>
    <tr>
      <td>Two</td>
      <td><button onClick="alert('two')">Ouch!</td>
    </tr>
    <tr>
      <td>Three</td>
      <td><button onClick="alert('three')">Ouch!</td>
    </tr>
  </table>
</label>

יש פה טבלא עם שלושה כפתורים, שבמקרה נמצאת בתוך אלמנט label, ולכל כפתור מוגדר אירוע onClick. נסו לחשוב - מה קורה כאן? איפה הקוד הלא הגיוני? והאם הקוד עובד?

1. הסבר - מה קורה בקוד

הדבר הלא הגיוני בקוד הזה הוא כמובן האלמנט label שעוטף את הטבלה. אף אחד לא עוטף טבלאות עם label ולכן זה הדבר הראשון שקופץ לעין כשקוראים את הקוד. לגבי התוצאה עם עיניים חדות אפשר לראות שכשאני לוחץ על כל אחד מהכפתורים גם הכפתור הראשון נלחץ. אבל מבחינת מה שקורה על המסך עדיין כל כפתור מציג את ה alert שלו בלבד.

עד ש...

2. בעיטה קטנה כדי לשבור את הכל

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

במבט ראשון על הבאג לא לגמרי ברור שהוא קשור ל Label. התופעה המתוארת היא טבלא עם כפתורים שכל כפתור עושה את העבודה שלו, ובנוסף בצורה שנראית אקראית הכפתור הראשון נלחץ. זה יכול לקחת זמן בכלל להבין את הקשר בין מיקום הלחיצה לאירוע של לחיצה על הכפתור הראשון, ועוד יותר זמן לחבר את כל זה לאלמנט ה label שיושב שם (במיוחד אם הטבלא בנויה מכמה קבצים באיזושהי שפת Templates).

3. הגירסא ההגיונית

ובחזרה לפתיחה: אפשר לכתוב קוד לא הגיוני שעובד, אבל כשאתם רואים התנהגות לא הגיונית ולא מבינים מה גורם לה, כדאי להתחיל מלחפש את הקוד הלא הגיוני במערכת שלכם.