من زرّ ثابت إلى عدّاد يعمل بـ JavaScript

الزرّ في HTML يعرف كيف يظهر، لكنه لا يعرف ما الذي تريد أن يحدث عند الضغط عليه. هنا يأتي دور JavaScript: تختار العنصر، تحتفظ بالمعلومة التي تتغيّر، ثم تحدّث ما يراه المستخدم.

سنطبّق هذه الفكرة على عدّاد بسيط. لا تحتاج إلى تثبيت أي شيء؛ افتح المثال في الأسفل، وشغّل الشرح القصير. الصوت في هذا العرض آلي للتوضيح، ويمكنك إيقافه ومتابعة النص.

#ثلاث خطوات، ومسؤولية واحدة لكل خطوة

نختار الزرّ باستخدام querySelector. العلامة # تعني أننا نبحث عن قيمة id محدّدة. إذا كتبنا اسماً لا يوجد في HTML، فلن نحصل على العنصر المطلوب.

const button = document.querySelector('#counter');
let count = 0;

المتغيّر count هو الحالة: الرقم الذي نتذكّره بين نقرة وأخرى. أمّا النص الظاهر داخل الزرّ فهو عرض لهذه الحالة، وليس مكان تخزينها.

button.addEventListener('click', () => {
  count += 1;
  button.textContent = `جرّبتها ${count} مرّات`;
});

الدالة لا تعمل عند تحميل الملف؛ نمرّرها إلى مستمع الحدث ليشغّلها عند النقر. في كل مرّة نزيد الرقم، ثم نكتب النص الجديد.

#شاهد، ثم غيّر شيئاً واحداً

const button = document.querySelector('button');
let count = 0;

button.addEventListener('click', () => {
  count += 1;
});

عندما يتوقّف الشرح لدورك، افتح app.js وغيّر count += 1 إلى count += 2. اضغط تشغيل، ثم اضغط الزرّ في النتيجة. هل يبدأ العدّاد من الصفر؟ وهل يزيد بمقدار اثنين في كل نقرة؟

العودة إلى الشرح تُظهر نسخة المدرّس. زرّ تجربتي يعيد تعديلاتك ما دامت الصفحة مفتوحة. هذه تجربة محلية قصيرة؛ ليست حفظاً سحابياً لمشروعك.

#لماذا يعود العدّاد إلى الصفر عند التشغيل؟

زرّ التشغيل يعيد إنشاء صفحة المعاينة من ملفاتك. لذلك تعمل let count = 0 من البداية، وتبدأ حالة جديدة. هذا يختلف عن نقرة داخل المعاينة، حيث تبقى الصفحة نفسها وتستمر الحالة.

إذا لم يعمل الزرّ، افحص ثلاثة أشياء: هل id في HTML مطابق؟ هل ملف JavaScript مرتبط بالصفحة؟ وهل يظهر خطأ في سجلّ التشغيل؟ إصلاح سبب واحد واضح أفضل من تغيير أسطر كثيرة دفعة واحدة.

#تجربة إضافية

أضف زرّاً ثانياً اسمه «إعادة العدّ». اجعل مستمعه يضع count على الصفر ويحدّث النص. انتبه: تغيير المتغيّر وحده لا يغيّر الواجهة؛ يجب أن تعرض القيمة الجديدة أيضاً.