عندما ترغب في تمرير قيمة زر الفأرة إلى وظيفة تفعيل عند النقر عليه، يمكنك استخدام بعض الأساليب لتحقيق ذلك بسهولة. في المثال الذي قدمته، ترغب في تمرير قيمة الزر “mybutton1” إلى وظيفة “dosomething()”.
الحل الأول يتمثل في استخدام الكائن this في داخل الوظيفة dosomething(). this يشير إلى العنصر الذي تم النقر عليه، وبالتالي يمكنك الوصول إلى قيمته باستخدام this.value. لكن هناك تحذير: يجب أن تكون وظيفة dosomething() تعرف على العناصر الفردية في صفحتك لاستخدام هذا الأسلوب. لذا، يمكن أن يكون هذا الحل غير عملي في حالة وجود العديد من الأزرار.
الطريقة الثانية، وهي الطريقة الأكثر شيوعًا، تتمثل في تمرير القيمة كمعلمة في وظيفة dosomething(). لفعل ذلك، يمكنك تمرير this.value كمعلمة في الدالة. إليك كيف يمكن تنفيذ هذا الحل:
html<input type="button" value="mybutton1" onclick="dosomething(this.value)">test
وفي الوظيفة dosomething()، يمكنك استقبال القيمة كمعلمة واستخدامها كما تشاء:
javascriptfunction dosomething(buttonValue) {
alert("You clicked: " + buttonValue);
}
هذا الحل يجعل الكود أكثر قابلية لإعادة الاستخدام وتجعل الوظيفة dosomething() تعمل بشكل جيد مع أي عدد من الأزرار دون الحاجة إلى تعديلها.
المزيد من المعلومات
بالطبع، لنواصل العمل على المقال:
الطريقة الثانية، وهي الطريقة الأكثر شيوعًا، تتمثل في تمرير القيمة كمعلمة في وظيفة dosomething(). بالنظر إلى الشفرة المقدمة، يمكنك تمرير this.value كمعلمة في الدالة. هكذا يمكنك تنفيذ هذا الحل:
html<input type="button" value="mybutton1" onclick="dosomething(this.value)">test
وفي الوظيفة dosomething()، يمكنك استقبال القيمة كمعلمة واستخدامها كما تشاء:
javascriptfunction dosomething(buttonValue) {
alert("You clicked: " + buttonValue);
}
هذا الحل يجعل الكود أكثر قابلية لإعادة الاستخدام وتجعل الوظيفة dosomething() تعمل بشكل جيد مع أي عدد من الأزرار دون الحاجة إلى تعديلها.
ومع ذلك، هناك أسلوب ثالث يستحق النظر فيه. يمكنك استخدام الإضافات الحديثة لجافا سكريبت مثل addEventListener لربط الأحداث بعناصر الواجهة. هذا يجعل الكود أكثر تنظيمًا وسهولة في الصيانة. هذا مثال على كيفية تنفيذ ذلك:
html<input type="button" value="mybutton1" id="myButton">test
ثم في الجافا سكريبت، يمكنك القيام بشيء مثل:
javascriptdocument.getElementById('myButton').addEventListener('click', function() {
dosomething(this.value);
});
هذا الأسلوب يفضله الكثيرون لأنه يفصل الجافا سكريبت عن العناصر في الصفحة بشكل أفضل، ويسهل عملية إدارة الأحداث وصيانتها.
