- כיצד לשנות כפתור ב-JavaScript?
- דוגמה 1: שינוי הודעות טקסט על ידי החלפת לחצן
- דוגמה 2: החלפת לחצן הפעלה/כיבוי ב-JavaScript
כיצד לשנות כפתור ב-JavaScript?
הצהרה מותנית היא דרישה בסיסית להחלפת כפתור ב-JavaScript. כדי להשיג זאת, אתה צריך לקבל את האלמנט ואז מיושמת פונקציה מותאמת אישית כדי להחיל פעולה ספציפית על האלמנט הזה. הפונקציה משויכת לאירוע ה-onclick של הכפתור. כך שבכל פעם שנלחץ על הכפתור, פונקציה זו תבוצע. בואו נתרגל כמה דוגמאות כדי להחליף לחצן ב-JavaScript.
דוגמה 1: שינוי הודעות טקסט על ידי החלפת לחצן
דוגמה נחשבת לשינוי הודעה על ידי החלפת לחצן ב-JavaScript. הדוגמה כוללת קוד HTML ו-JavaScript, אשר מוסברים להלן:
קוד HTML
< html >
< h2 > דוגמה למעבר לחצן < / h2 >
< div תְעוּדַת זֶהוּת = 'js' > לחץ על כפתור כדי לראות קסם < / div >
< לַחְצָן בלחיצה = 'btntog()' > לַחְצָן < / לַחְצָן >
< / html >
< תַסרִיט src = 'test.js' >< / תַסרִיט >
בקוד HTML, התיאור הוא כדלקמן:
- א תג נוצר עם ' id=js '.
- לאחר מכן, נוצר כפתור המשויך ל-a 'btntog()' שיטה. על ידי לחיצה 'לַחְצָן' , השיטה ' btntog() ' מופעל.
- בסופו של דבר, קובץ JavaScript 'test.js' מועבר כ src בְּתוֹך
קוד JavaScript
functionbtntog ( )
{
איפה = מסמך. getElementById ( 'js' ) ;
אם ( ט. innerHTML == 'ברוכים הבאים ל-Linuxhint' ) {
ט. innerHTML = 'עולם ה-JavaScript' ; }
אַחֵר {
ט. innerHTML = 'ברוכים הבאים ל-Linuxhint' ; }
}בקוד הזה:
- getElementById משמש כדי לחלץ את רכיב ה-HTML ' js ' והערך מאוחסן במשתנה ' ט '.
- לאחר מכן, ה innerHTML הנכס מועסק בתנאי אם כדי לבדוק את הטקסט ' ברוכים הבאים ל-Linuxhint '.
- אם התנאי נכון, התוכן ' ברוכים הבאים ל-Linuxhint ” מוחלף ב 'עולם ה-JavaScript '.
- אם התנאי שקרי, הטקסט 'ברוכים הבאים ל-Linuxhint' מוקצה כתוכן HTML לתג div.
תְפוּקָה
הפלט מראה כי החלפת כפתור מחזירה שתי הודעות כ 'ברוכים הבאים ל-Linuxhint' ו 'עולם ה-JavaScript' לחלופין.
דוגמה 2: החלפת לחצן הפעלה/כיבוי ב-JavaScript
דוגמה לשינוי הטקסט המוטבע של הכפתור. בדוגמה זו, ' דולק כבוי ” טקסט לחילופין ישנה את הערך על ידי לחיצה על הכפתור. קודי HTML ו-JavaScript מסופקים כאן:
קוד HTML
< html >
< h2 > דוגמה למעבר לחצן h2 >
< סוג קלט = 'לַחְצָן' תְעוּדַת זֶהוּת = 'myBtn' ערך = 'כבוי'
בלחיצה = 'תַאֲרִיך();' >
< script src = 'test.js' > תַסרִיט >
html >הקוד לעיל מתואר כך:
- כפתור הניתן ללחיצה בעל מזהה של 'myBtn' נוצר והערך שלו מוגדר ל 'כבוי' .
- על ידי לחיצה על הכפתור, ה תַאֲרִיך() השיטה תופעל.
- בסוף, 'test.js' מחובר לנתיב המקור שבתוכו