كيفية إنشاء زر في جافا سكريبت

يريد المطورون في الغالب أن تكون صفحات الويب الخاصة بهم جذابة وتجعلها تفاعلية. لهذا الغرض ، تتم إضافة الأزرار إلى صفحة الويب. على سبيل المثال ، عندما تكون هناك حاجة لإرسال البيانات أو تلقيها ، بما في ذلك انقر فوق الأحداث للوظائف المضافة للمستخدم أثناء التسجيل أو تسجيل الدخول إلى حساب. في مثل هذه الحالات ، تسمح الأزرار للمستخدم النهائي بأداء وظائف مختلفة بذكاء.

ستشرح هذه المدونة طرق إنشاء الأزرار في JavaScript.

كيفية إنشاء زر في جافا سكريبت؟

لإنشاء زر في JavaScript ، يمكن استخدام الطرق التالية:

• أساليب 'createElement ()' و 'appendChild ()'
• سمة 'النوع' لعلامة 'الإدخال'

الأساليب التالية ستوضح المفهوم واحدًا تلو الآخر!

الطريقة الأولى: إنشاء زر في JavaScript باستخدام طرق 'createElement ()' و 'appendChild ()'

ال ' createElement () 'ينشئ عنصرًا ، و' إلحاق الطفل() 'تلحق طريقة عنصر بآخر عنصر تابع للعنصر. سيتم تطبيق هذه الطرق لإنشاء زر وإلحاقه بنموذج كائن المستند (DOM) الذي يجب استخدامه ، على التوالي.

بناء الجملة

في الصيغة أعلاه ، ' يكتب يشير 'إلى نوع العنصر الذي سيتم إنشاؤه باستخدام طريقة createElement () ، و' العقدة 'هي العقدة التي سيتم إلحاقها بمساعدة طريقة appendChild ().

المثال التالي سوف يشرح المفهوم المذكور.

مثال

أولاً ، ' زر 'باستخدام طريقة document.createElement () وتخزينها في متغير باسم' إنشاءزر ':

بعد ذلك ، ' النص الداخلي 'تشير الخاصية إلى الزر الذي تم إنشاؤه وتعيين القيمة النصية للزر المحدد على النحو التالي:

أخيرًا ، ' إلحاق الطفل() 'سيُلحق التابع الزر الذي تم إنشاؤه بـ DOM بالإشارة إلى المتغير الذي يتم تخزينه فيه كوسيطة:

ناتج التنفيذ أعلاه سينتج على النحو التالي:

الطريقة 2: إنشاء زر في JavaScript باستخدام سمة 'النوع' لعلامة 'الإدخال'

ال ' يكتب 'تمثل نوع عنصر الإدخال المراد عرضه. يمكن استخدامه لإنشاء زر بتحديد ' زر 'كقيمة سمة النوع لعلامة الإدخال.

بناء الجملة

هنا، ' زر 'يشير إلى نوع حقل الإدخال.

تحقق من المثال أدناه.

مثال

أولاً ، سنستخدم علامة إدخال ، ونحدد نوعها كـ ' زر '، والقيمة كـ' انقر فوق لي '. نتيجة لذلك ، سيتم إنشاء زر. علاوة على ذلك ، فإنه سيؤدي إلى ' createButton () 'عند النقر فوقها:

في ملف جافا سكريبت ، سنحدد ' createButton () 'التي ستنشئ مربع تنبيه عند النقر على الزر المضاف:

انتاج |

يمكن استخدام الأساليب التي تمت مناقشتها لإنشاء زر في JavaScript بشكل مناسب وفقًا للمتطلبات.

استنتاج

لإنشاء زر في JavaScript ، ' createElement () ' و ' إلحاق الطفل() 'يمكن تطبيقها لإنشاء زر وإلحاقه لاستخدامه في DOM. هناك أسلوب آخر يمكن استخدامه لإنشاء زر وهو تحديد نوع الإدخال وإضافة الوظائف المرتبطة به. توضح هذه المقالة طرق إنشاء زر في JavaScript.