בעת יצירת עמודים, לעיתים יש צורך כי כאשר תלחץ על הכפתור המוצב בעמוד, אירוע כלשהו באירוע שתוכנת על ידי הכותב בדפדפן. לשם כך, עליך להציב קוד JavaScript במסמך שנוצר ולקשור אותו לכפתור הנדרש. בהתאם לכמות הקוד הנדרשת ליישום האירוע המיועד, תוכלו להשתמש בדרכים שונות לחיבור הלחצן לקוד.
הוראות
שלב 1
לרוב, שיחות קוד JavaScript קשורות לאירוע onclick, כלומר ללחיצה על כפתור העכבר השמאלי. אם אינך זקוק להרבה קוד כדי לתאר את הפעולה שצריכה לקרות, ניתן להציב את כל זה ישירות בתג הכפתור. לדוגמא, כדי לתכנת את הדפדפן להציג הודעה פשוטה כשלוחצים על כפתור, סקריפט JavaScript ייראה כך: התראה ('קוד עבד!') נדרשת רק הצהרה וטקסט אחד. ניתן למקם את כל זה בקלות בתיאור האירוע onclick של תג הכפתור. במקרה זה, קוד ה- HTML הפשוט ביותר של הדף עשוי להיראות כך:
כפתור עם קוד
כפתור עם קוד
שלב 2
לא מעשי להציב קוד JavaScript מורכב יותר ישירות בתג הכפתור. קל יותר לעשות ממנו פונקציה נפרדת, ולשים את קריאתו באירוע onclick. לדוגמה, זה עשוי להיראות כמו פונקציה שמציגה חלון המכיל את הזמן של לחיצת כפתור: פונקציה getTime () {
var now = תאריך חדש ();
התראה ("הקוד עבד ב" + now.getHours () + ":" + now.getMinutes ());
} יש למקם אותו בכותרת העמוד (בין התגים ל-). הקוד המלא של הדף עם קריאה לפונקציה זו הכרוכה בכפתור עשוי להיראות כך:
לחצן קריאה לפונקציה
פונקציה getTime () {
var now = תאריך חדש ();
התראה ("הקוד עבד ב" + now.getHours () + ":" + now.getMinutes ());
}
לחצן קריאה לפונקציה
שלב 3
יש להשתמש באותה שיטה כאשר לחיצה על כמה כפתורים שונים אמורה להעלות אירוע שניתן לתאר עם אותו קוד JavaScript. לדוגמא, ניתן לשנות מעט את הפונקציה הקודמת כדי להוסיף את זיהוי הכפתור הלחוץ לתיבת ההודעות: function getTime (btnString) {
var now = תאריך חדש ();
התראה (btnString + "לחיצה" + now.getHours () + ":" + now.getMinutes ());
} הקוד השלם לדף עם שלושה כפתורים כאלה עשוי להיראות כך:
שלושה כפתורים עם שיחת פונקציה
פונקציה getTime (btnString) {
var now = תאריך חדש ();
התראה (btnString + "לחיצה" + now.getHours () + ":" + now.getMinutes ());
}
כפתור ראשון
כפתור שני
כפתור שלישי
