מפתחים רוצים בעיקר שדפי האינטרנט שלהם יהיו אטרקטיביים ויהפכו אותם לאינטראקטיביים. לשם כך, מוסיפים כפתורים לדף האינטרנט. לדוגמה, כאשר יש צורך לשלוח או לקבל נתונים, כולל אירועי קליקים לתוספת פונקציונליות עבור המשתמש בעת רישום או כניסה לחשבון. במקרים כאלה, הכפתורים מאפשרים למשתמש הקצה לבצע פונקציות שונות בצורה חכמה.
בלוג זה יסביר את השיטות ליצירת כפתורים ב-JavaScript.
כיצד ליצור כפתור ב-JavaScript?
כדי ליצור כפתור ב-JavaScript, ניתן להשתמש בשיטות הבאות:
הגישות הבאות ידגימו את הרעיון בזו אחר זו!
שיטה 1: צור כפתור ב-JavaScript באמצעות שיטות 'createElement()' ו-'appendChild()'
ה ' createElement() שיטת ' יוצרת אלמנט, וה' appendChild() ' השיטה מוסיפה אלמנט לילד האחרון של אלמנט. שיטות אלו יושמו ליצירת כפתור וצירופו ל-Document Object Model(DOM) שיש להשתמש בו, בהתאמה.
תחביר
מסמך. createElement ( סוּג )אֵלֵמֶנט. appendChild ( צוֹמֶת )
בתחביר לעיל, ' סוּג ' מתייחס לסוג האלמנט שייווצר באמצעות שיטת createElement() ו-' צוֹמֶת ” הוא הצומת שיצורף בעזרת השיטה appendChild() .
הדוגמה הבאה תסביר את המושג המוצהר.
דוגמא
ראשית, ' לַחְצָן ' ייווצר באמצעות שיטת document.createElement() ויאוחסן במשתנה בשם ' לחצן create ”:
const לחצן create = מסמך. createElement ( 'לַחְצָן' )לאחר מכן, ה' innerText ' המאפיין יפנה ללחצן שנוצר ויקבע את ערך הטקסט של הכפתור שצוין באופן הבא:
לחצן create. innerText = 'לחץ עלי'לבסוף, ה' appendChild() ' השיטה תוסיף את הכפתור שנוצר ל-DOM על ידי התייחסות למשתנה שבו הוא מאוחסן כארגומנט:
מסמך. גוּף . appendChild ( לחצן create ) ;הפלט של היישום לעיל יביא כדלקמן:
שיטה 2: צור כפתור ב-JavaScript באמצעות תכונת 'סוג' של תג 'קלט'.
ה ' סוּג ' תכונה מייצגת את סוג רכיב הקלט שיש להציג. ניתן להשתמש בו כדי ליצור כפתור על ידי ציון ' לַחְצָן ' כערך של תכונת הסוג של תג הקלט.
תחביר
< סוג קלט = 'לַחְצָן' >כאן, ' לַחְצָן ' מציין את סוג שדה הקלט.
בדוק את הדוגמה הנתונה למטה.
דוגמא
ראשית, נשתמש בתג קלט, נציין את סוגו כ' לַחְצָן ', וערך כ' לחץ עלי '. כתוצאה מכך, ייווצר כפתור. יתר על כן, זה יפעיל את ' createButton() ' פונקציה בעת לחיצה:
< סוג קלט = ערך הכפתור = לחץ_לי על קליק = 'createButton()' >בקובץ JavaScript, נגדיר את ' createButton() ' פונקציה שתיצור תיבת התראה כאשר תלחץ על הכפתור שנוסף:
פוּנקצִיָה לחצן create ( ) {עֵרָנִי ( 'זה כפתור' )
}
תְפוּקָה
ניתן להשתמש בטכניקות הנדונות ליצירת כפתור ב-JavaScript בהתאם לדרישות.
סיכום
כדי ליצור כפתור ב-JavaScript, ' createElement() ' ו' appendChild() ניתן ליישם שיטות ליצירת כפתור וצירופו לשימוש ב-DOM. טכניקה נוספת שניתן להשתמש בה ליצירת כפתור היא הגדרת סוג קלט והוספת הפונקציונליות הקשורה. מאמר זה הדגים את השיטות ליצירת כפתור ב-JavaScript.