- كيفية تبديل زر في جافا سكريبت؟
- مثال 1: تعديل الرسائل النصية عن طريق تبديل زر
- مثال 2: تبديل زر التشغيل / الإيقاف في JavaScript
كيفية تبديل زر في جافا سكريبت؟
العبارة الشرطية هي مطلب أساسي لتبديل زر في JavaScript. لتحقيق ذلك ، تحتاج إلى الحصول على العنصر ثم يتم تطبيق بعض الوظائف المخصصة لتطبيق بعض العمليات المحددة على هذا العنصر. الوظيفة مرتبطة بحدث onclick للزر. لذلك ، كلما تم النقر فوق الزر ، سيتم تنفيذ هذه الوظيفة. دعنا نتدرب على بعض الأمثلة لتبديل زر في جافا سكريبت.
مثال 1: تعديل الرسائل النصية عن طريق تبديل زر
يعتبر أحد الأمثلة لتعديل رسالة عن طريق تبديل زر في JavaScript. يشتمل المثال على كود HTML وجافا سكريبت ، الموضحة أدناه:
كود HTML
< لغة البرمجة >
< h2 > مثال لتبديل زر < / h2 >
< شعبة هوية شخصية = 'شبيبة' > اضغط على زر لرؤية السحر < / شعبة >
< زر عند النقر = 'btntog ()' > زر < / زر >
< / لغة البرمجة >
< النصي src = 'test.js' > < / النصي >
في كود HTML ، يكون الوصف كما يلي:
- أ العلامة مع ' معرف = شبيبة '.
- بعد ذلك ، يتم إنشاء زر مرتبط بملف 'btntog ()' طريقة. عن طريق الضغط 'زر' ، طريقة ' btntog () ' يتم تشغيل.
- في النهاية ، ملف JavaScript 'test.js' تم تمريره كـ src داخل
كود جافا سكريبت
الوظيفة ( )
{
أين = وثيقة. getElementById ( 'شبيبة' ) ؛
إذا ( ر. داخلي HTML == 'مرحبًا بك في Linuxhint' ) {
ر. داخلي HTML = 'عالم جافا سكريبت' ؛ }
آخر {
ر. داخلي HTML = 'مرحبًا بك في Linuxhint' ؛ }
}في هذا الكود:
- getElementById يتم استخدامه لاستخراج عنصر HTML ' شبيبة 'ويتم تخزين القيمة في متغير' ر '.
- بعد ذلك ، داخلي HTML يتم استخدام الخاصية في شرط if للتحقق من النص ' مرحبًا بك في Linuxhint '.
- إذا كان الشرط صحيحًا ، فإن المحتوى ' مرحبًا بك في Linuxhint ' 'عالم جافا سكريبت '.
- إذا كان الشرط خاطئا ، فإن النص 'مرحبًا بك في Linuxhint' كمحتوى HTML لعلامة div.
انتاج |
يوضح الإخراج أن تبديل الزر يؤدي إلى إرجاع رسالتين كـ 'مرحبًا بك في Linuxhint' و 'عالم جافا سكريبت' بدلا من ذلك.
مثال 2: تبديل زر التشغيل / الإيقاف في JavaScript
يتم اتباع مثال لتغيير النص المضمن للزر. في هذا المثال ، ' ON / OFF بدلاً من ذلك ، سيغير النص القيمة عن طريق الضغط على الزر. يتم توفير أكواد HTML و JavaScript هنا:
كود HTML
< لغة البرمجة >
< h2 > مثال لتبديل زر h2 >
< نوع الإدخال = 'زر' هوية شخصية = 'myBtn' القيمة = 'إيقاف'
عند النقر = 'تاريخ()؛' >
< النصي src = 'test.js' > النصي >
لغة البرمجة >تم وصف الكود أعلاه على النحو التالي:
- زر قابل للنقر به معرف 'myBtn' تم إنشاؤه وتعيين قيمته على 'إيقاف' .
- بالضغط على الزر ، فإن ملف تاريخ() سيتم تشغيل الطريقة.
- فى النهاية، 'test.js' يتم إرفاقه بمسار المصدر داخل