ما حل المشكلة Cannot read property 'addEventListener' of null

Omar Abdelfattah2 · 27 أغسطس 2023

image.png.4983335ea04a7a93d2a872b229cd90af.png

كيف اجعل event listener منطقيه بالنسبه لوباك جاءت هذه المشكله بعد كتابة كود Javascript في الكونسل مع عدم وجود رسالة ايرور

عمر قره محمد · 27 أغسطس 2023

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

تأكد من ان المحدد الذي تستخدمه مطابق للمحدد الموجود في كود الـ html وفي حال استمرت المشكلة فجرب إضافة الكود الخاص بك بالشكل التالي :

window.onload = ()=> {
  // الكود الخاص بك
}

للفهم اكثر لاحظ الكود التالي الذي لن يعمل :

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- html كود جافاسكريبت موجود قبل كود الـ -->
    <script>
      const heading = document.getElementById("heading")
      heading.innerText = "hello world"
    </script>
  </head>

  <body>
    <h1 id="heading"></h1>
  </body>

</html>

يقوم الكود السابق بحقن النص hello world في الـ heading ولكنه لن يعمل بسبب تنفيذ كود الجافاسكريبت قبل ان يتم تحميل عناصر ال html وحتى نجعل الكود السابق يجب ان نقوم بواحد حلين :

الاول هو أن نضع كود الـ js في نهاية الصفحة مثل :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
  </head>

  <body>
    <h1 id="heading"></h1>
    <script>
      const heading = document.getElementById("heading")
      heading.innerText = "hello world"
    </script>
  </body>
</html>

والثاني هو ان نستخدم الـ onload :

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>test</title>
    <script>
      window.onload = () => {
        const heading = document.getElementById("heading")
        heading.innerText = "hello world"
      }
    </script>
  </head>

  <body>
    <h1 id="heading"></h1>
  </body>

</html>

Adnane Kadri · 27 أغسطس 2023

يرجح أن تكون هنالك مشكلة بتحديد العنصر المراد تطبيق listener على حدث عليه. ولذلك تأكد من استعمال محدد DOM صحيح.

const el = document.getElementById('myItem');
el.addEventListener('click', function(){
   console.log('clicked')
})

بحيث يكون هنالك بالفعل عنصر بالمحدد الموصوف:

<button id="myItem">click me</button>

قد يمكنك أيضا اضافة شرط لإضافة هذا الـ listener:

if (el) {
  el.addEventListener('click', function(){});
}

ما حل المشكلة Cannot read property 'addEventListener' of null

السؤال

Omar Abdelfattah2

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية