اذهب إلى المحتوى
  • 0

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

Omar Abdelfattah2

السؤال

Recommended Posts

  • 0

هذا الخطأ ناتج عن استخدام الدالة 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 وحتى نجعل الكود السابق يجب ان نقوم بواحد حلين :

  1. الاول هو أن نضع كود الـ 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>
  2. والثاني هو ان نستخدم الـ 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يرجح أن تكون هنالك مشكلة بتحديد العنصر المراد تطبيق 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(){});
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...