JavaScript · الدرس ١ من ٤

اجعل الزر يغيّر الرسالة

تختار getElementById عنصراً باسمه في الصفحة. تربط addEventListener الزر بالأوامر التي تُنفّذ عند الضغط عليه، وتغيّر textContent النص الظاهر.

جرّب الآن

غيّر رسالة الترحيب، وشغّل الكود، ثم اضغط الزر في النتيجة.

يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.

اختر صورة من جهازك

تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.

        JavaScript · script.jsdocument.getElementById("greet")
  .addEventListener("click", () => {
    document.getElementById("message")
      .textContent = "أهلاً بك في صفحتي!";
  });
        عدّل HTML وCSS لمشروعك
            HTML · index.html<h1>سارة</h1>
<button id="greet">رحّب بي</button>
<p id="message">اضغط الزر لترى الرسالة.</p>
            CSS · style.cssbody { font-family: sans-serif; padding: 16px; color: #12211f; background: #fcfbf7; } h1 { font-size: 24px; } button { font: inherit; padding: 6px 12px; color: #fff; background: #0c4b3c; border: 0; border-radius: 6px; cursor: pointer; }
        
    

صفحتك

تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.

ظهرت رسالتك بعد الضغط؟ انتقل إلى عدّ الضغطات.

التالي: العدّاد

أحتاج مساعدة

غيّر النص بين علامتي التنصيص فقط أولاً. شغّل الكود، ثم اضغط زر «رحّب بي» داخل النتيجة. يجب أن يطابق greet اسم الزر في HTML.

شرح إضافي

احفظ الصفحة على جهازك

نزّل ملف HTML

إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.

الكود الكامل للحفظ

جرّب الآن

صفحتك

ملاحظات على عملك