استخدام العناصر change و onchange لتنفيذ اوامر محددة في قائمة اختيارات select في جافاسكربت الدرس|37| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الخميس، 24 سبتمبر 2020

استخدام العناصر change و onchange لتنفيذ اوامر محددة في قائمة اختيارات select في جافاسكربت الدرس|37|

 

تنفيذ الأوامر عبر change - onchange

سوف نتحدث اليوم عن event تسمى onchange في لغه جافاسكربت, في بعض الأحيان ترغب عندما يقوم المستخدم بتحديد احد الخيارات ضمن select option بتنفيذ الأمر التي ترغب بها, من خلال onchange يمكن القيام بذلك, توجد طريقتين ليقوموا بنفس الغرض سوف نشرح الأثنين.
 

الطريقة الأولى

تكون هذه الطريقة عبر كتابة الأوامر ضمن وسم html بشكل مباشر عبر onchange.
 
مثال
لنفترض أنه لدينا عنصر select و به ثلاث خيارات سوف نقوم بإستخدامه من اجل تغير خلفية الموق.
 
<body>
    <select>
        <option value="red">أحمر</option>
        <option value="yellow">اصفر</option>
        <option value="blue">ازرق</option>
    </select>
</body>
 
نفتح الملف في المتصفح
 
كم لاحظتم سوف تكون لدينا القائمة عادية فارغة بها الخيارات الذي تم تحديدها, نريد إذا المستخدم قام بإختيار احد الألوان المحددة يتم تنفيذ اوامر الجافاسكربت لتغيير لون الخلفية, يمكن إضافة الأوامر بشكل مباشر ضمن select و استخدام العنصر onchange ثم وضع اوامر الجافاسكربت الذي نرغب بتحديدها.
<body>
    <select id="color" onchange= "document.body.style.background =
    document.getElementById('color').value;">
        <option value="red">أحمر</option>
        <option value="yellow">اصفر</option>
        <option value="blue">ازرق</option>
    </select>
</body>

صورة الكود في المحرر

 
صورة من المتصفح

شرح المثال السابق
لقد حددنا الأيدي color لسهولة الوصول له ثم استخدمنا الخاصية onchange ليتم من خلالها تنفيذ اوامر الجافاسكربت و حددنا body اي يحصل التغيير على كامل جسم الصفحة و اخترنا انه يتم تغير الخلفية لهذه الصفحة, و تم الوصول للأيدي عبر document و اخترنا color ضمن علامتي تنصيص مفردات( هنا لا يقبل ان تكون علامة التنصيص مزدوجه ), و عند فتحه في المتصفح عندما يختار المستخدم لون اصفر يتم تغير الخلفية صفراء على الفور و كذلك الأمر إذا اختار باقي الخيارات.
 

الطريقة الثانية

تكون هذه الطريقة عبر addEventListener و اختيار الأوامر الذي تريد ان يتم تنفيذها.
 
document.getElementById("color").addEventListener("change", ()=>{
    document.body.style.background = document.getElementById('color').value;
});

في المحرر
 
سوف تكون النتيجة كما في السابق بالضبط عند اختيار اي لون يتم تغيير الخلفية له.

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام