تمرير قيمة زر الفأرة في JavaScript

عندما ترغب في تمرير قيمة زر الفأرة إلى وظيفة تفعيل عند النقر عليه، يمكنك استخدام بعض الأساليب لتحقيق ذلك بسهولة. في المثال الذي قدمته، ترغب في تمرير قيمة الزر “mybutton1” إلى وظيفة “dosomething()”.

الحل الأول يتمثل في استخدام الكائن this في داخل الوظيفة dosomething(). this يشير إلى العنصر الذي تم النقر عليه، وبالتالي يمكنك الوصول إلى قيمته باستخدام this.value. لكن هناك تحذير: يجب أن تكون وظيفة dosomething() تعرف على العناصر الفردية في صفحتك لاستخدام هذا الأسلوب. لذا، يمكن أن يكون هذا الحل غير عملي في حالة وجود العديد من الأزرار.

الطريقة الثانية، وهي الطريقة الأكثر شيوعًا، تتمثل في تمرير القيمة كمعلمة في وظيفة dosomething(). لفعل ذلك، يمكنك تمرير this.value كمعلمة في الدالة. إليك كيف يمكن تنفيذ هذا الحل:

htmlCopy code
<input type="button" value="mybutton1" onclick="dosomething(this.value)">test

وفي الوظيفة dosomething()، يمكنك استقبال القيمة كمعلمة واستخدامها كما تشاء:

javascriptCopy code
function dosomething(buttonValue) {
    alert("You clicked: " + buttonValue);
}

هذا الحل يجعل الكود أكثر قابلية لإعادة الاستخدام وتجعل الوظيفة dosomething() تعمل بشكل جيد مع أي عدد من الأزرار دون الحاجة إلى تعديلها.

بالطبع، لنواصل العمل على المقال:

الطريقة الثانية، وهي الطريقة الأكثر شيوعًا، تتمثل في تمرير القيمة كمعلمة في وظيفة dosomething(). بالنظر إلى الشفرة المقدمة، يمكنك تمرير this.value كمعلمة في الدالة. هكذا يمكنك تنفيذ هذا الحل:

htmlCopy code
<input type="button" value="mybutton1" onclick="dosomething(this.value)">test

وفي الوظيفة dosomething()، يمكنك استقبال القيمة كمعلمة واستخدامها كما تشاء:

javascriptCopy code
function dosomething(buttonValue) {
    alert("You clicked: " + buttonValue);
}

هذا الحل يجعل الكود أكثر قابلية لإعادة الاستخدام وتجعل الوظيفة dosomething() تعمل بشكل جيد مع أي عدد من الأزرار دون الحاجة إلى تعديلها.

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

htmlCopy code
<input type="button" value="mybutton1" id="myButton">test

ثم في الجافا سكريبت، يمكنك القيام بشيء مثل:

javascriptCopy code
document.getElementById('myButton').addEventListener('click', function() {
    dosomething(this.value);
});

هذا الأسلوب يفضله الكثيرون لأنه يفصل الجافا سكريبت عن العناصر في الصفحة بشكل أفضل، ويسهل عملية إدارة الأحداث وصيانتها.