جافاسكريبت | لماذا خاصية classList لا تعمل إذا وضعت كود جافا سكريبت في HTML ؟

مصطفى اوريك · 22 سبتمبر 2021

<head>
    <meta charset="UTF-8" />
    <title>Learn JavaScript</title>
    <script>
        let ahref = document.quer("open");
        console.log(ahref[1].classList)
    </script>
  </head>
  <body>
    <a class="open" href="https://google.com">Google</a>
    <a class="open" href="https://wikipedia.org">wikipedia</a>
    <a class="not" href="https://facebook.com">Facebook</a>
    <a class="linked" href="https://wikipedia.org">wikipedia</a>
  </body>
</html>

لماذا classList لا تعمل إذا وضعت كود جافا سكريبت في HTML ؟

يظهر لي الخطأ التالي : Uncaught TypeError: Cannot set properties of null (setting 'onload')

تعديل : تم حل المشكلة بال window.onload

تم التعديل في 22 سبتمبر 2021 بواسطة مصطفى اوريك

Wael Aljamal · 22 سبتمبر 2021

إن جافاسكربت تعمل مباشرة حال وصول قراءة شيفرة HTML للأسطر الخاصة بها، لذلك علينا تأجيل تنفيذ شيفرة جافاسكربت حتى اكتمال تحميل body، أي انقل جزء script من عنصر head إلى آخر جزء ضمن body قبل وسم الإغلاق، ليصبح آخر عنصر ضمنه.

وباستعمال window.onload هنا نقوم بتعريف مستم أحداث خاص باكتمال تحميل الصفحة، لذلك نضمن وجود عناصر HTML على شكل DOM وجاهزيتها لتنفيذ شيفرات جافاسكربت عليها.

الطريقة الأولى مستعملة أكثر لأنها أبسط. بعد نقل الشيفرة للأسفل، أصلح أخطائها..

سامح أشرف · 22 سبتمبر 2021

لاحظ أن لديك خطأ في كتابة كود JavaScript في عملية تحديد العنصر من خلال الصنف open، حيث أن الكود يجب أن يكون كالتالي:

<script>
    let ahref = document.querySelectorAll('.open');
    console.log(ahref[1].classList)
</script>

لاحظ إستخدام التابع querySelectorAll وليس quer أيضًا يجب إضافة نقطة . قبل كلمة open حيث أننا نقوم بتحديد العناصر من خلال الصنف class ولذلك يجب إضافة . قبل اسم الصنف.

ملاحظة: يتم إضافة العلامة # قبل المعرف في حالة إستخدام المعرفات IDs بدلًا من الأصناف.

أيضًا كما وضح وائل أن كود جافاسكريبت يتم تنفيذه قبل تحميل عناصر HTML، لذا حتى في حالة كان كود جافاسكريبت يعمل بشكل سليم، فلن يتم إيجاد العنصر .open وذلك لأنه لم يتم تحميله بعد (في وقت تنفيذ كود جافاسكريبت)، ولحل هذه المشكلة يجب نقل الكود إلى أسفل المستند (قبل نهاية جسم الصفحة body)، على النحو التالي:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Learn JavaScript</title>
  </head>
  <body>
    <a class="open" href="https://google.com">Google</a>
    <a class="open" href="https://wikipedia.org">wikipedia</a>
    <a class="not" href="https://facebook.com">Facebook</a>
    <a class="linked" href="https://wikipedia.org">wikipedia</a>
    
    <script>
        let ahref = document.querySelectorAll('.open');
        console.log(ahref[1].classList)
    </script>
  </body>
</html>

أو يمكنك أن تستخدم الحدث onload ليتم تنفيذ الكود عندما يكتمل تحميل الصفحة فقط، كالتالي:


<html>
  <head>
    <meta charset="UTF-8" />
    <title>Learn JavaScript</title>
    
    <script>
      document.onload = function(e){ 
        let ahref = document.querySelectorAll('.open');
        console.log(ahref[1].classList)
      }
    </script>

  </head>
  <body>
    <a class="open" href="https://google.com">Google</a>
    <a class="open" href="https://wikipedia.org">wikipedia</a>
    <a class="not" href="https://facebook.com">Facebook</a>
    <a class="linked" href="https://wikipedia.org">wikipedia</a>
  </body>
</html>

ويمكنك أن تستعين بهذه المقالة لفهم المزيد عن الأحداث وكيف تعمل (فهم الأحداث في جافاسكربت - أكاديمية حسوب)

جافاسكريبت | لماذا خاصية classList لا تعمل إذا وضعت كود جافا سكريبت في HTML ؟

السؤال

مصطفى اوريك

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

Recommended Posts

Wael Aljamal

سامح أشرف

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية