مشكلة عدم اضهار عناصر HTML بصورة غير صحيحة

العيد العيد تليلي · 29 يوليو 2023

مرحبا

كنت اتعلم كيف ابرمج مواقع الويب عند اسامة الزيرو فجأت لقيت بهادة المشكل الموضحة في الصورة :

هاده أكواد HTML

<!DOCTYPE html>
<html>
<head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>Page Title</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'> -->
     <script src='main.js'></script>
</head>
<body>
     <p class="ms">Hello Amad</p>
     <p class="msn">Hello mastr</p>

     <div id="my-div">a5c55</div>

     <p>fpsvd</p>
</body>
</html>

وهاده أكواد لغة جافا سكريبت

let vb0 = document.getElementById("my-div");// ==> id استدعاء  عن طريق 
console.log(vb0);
let vb1 = document.getElementsByTagName("div");// ==> استدعاء  عن طريق  اسم الوسم
console.log(vb1 , "1");
let vb2 = document.getElementsByClassName("ms");// ==> class استدعاء  عن طريق 
console.log(vb2 , "2");
let vb3 = document.querySelector("a1");// ==>   لاكن تأتي بي أول عنصر class و id استدعاء  عن طريق 
console.log(vb3 , "3");
let vb4 = document.querySelectorAll(".a2");// ==> لاكن تأتي بعدة عناصر class استدعاء  عن طريق 
console.log(vb4 , "4");
let vb5 = document.getElementById(".a2");// ==>

ممكن تفسير سبب المشكلة وما هو الحل

تم التعديل في 29 يوليو 2023 بواسطة العيد العيد تليلي

Kais Hasan · 29 يوليو 2023

أعتقد أنك تقصد المشكلة التي تظهر باللون الأصفر في ال console.

إنها ليست مشكلة ولا تؤثر على العمل نهائياً، أي يمكنك إهمالها، و لكن في حال كنت تريد إزالتها يمكنك القيام بذلك كما يلي:

اضغط على المسنن الموجود في الزاوية العليا من اليمين، كما هو موضح في الصورة التالية.

image.png.f635925ffa56a4476428b05fc1dc4e59.png

قم بإزالة تفعيل الخيارات Enable JavaScript source maps و Enable CSS source maps.

هذا كفيل بأن يزيل هذا التحذير الذي يظهر لك.

أما في حال كان قصدك بأن العناصر لا تظهر كما كتبتها في ال html فالسبب غالباً أنك تقوم بفتح ملف غير الذي تقوم بالتعديل عليه، ﻷنني نسخت الأكواد التي كتبتها و هي تعمل بشكل صحيح.

Mustafa Suleiman · 30 يوليو 2023

التنبيه

"DevTools failed to load source map: Could not load content for chrome-extension://pejiikdiikindfooppgaidccahalenih/webspeed.js.map: System error: net: ERR_BLOCKED_BY_CLIENT"

يعني خطأ في تحميل خريطة المصدر (source map) في جوجل كروم، وتعرف خريطة المصدر بأنها ملف يرتبط بملف JavaScript وتساعد في تحسين عملية تصحيح الأخطاء وتصفح الشيفرة المصدرية عند تطوير الويب، ولكن، قد يحدث خطأ في تحميل خريطة المصدر أحيانًا، مما يؤدي إلى ظهور رسالة الخطأ التي رأيتها.

وتُبيّن الرسالة أنه لم يتمكن من تحميل محتوى خريطة المصدر من مسار الامتداد (extension) في جوجل كروم بعنوان pejiikdiikindfooppgaidccahalenih واسم الملف هو webspeed.js.map.

أما System error: net: :ERR_BLOCKED_BY_CLIENT،تشير إلى أن الخطأ تم حظره بواسطة العميل، والعميل هنا يمثل امتداد مثبت على متصفح جوجل كروم يحميك من بعض السلوكيات غير المرغوب فيها على الإنترنت.

وتعتبر خرائط المصدر (source maps) ملفات ضرورية للمطورين أثناء التطوير لكنها لا تؤثر على عمل الموقع أو التطبيق النهائي للمستخدمين العاديين، وتظهر تلك الرسالة للمطورين للإشارة إلى أن خريطة المصدر لهذا الامتداد قد فشلت في التحميل، وهي رسالة تحذيرية وليست ضارة بالضرورة، وبالطبع أنت لست مطور لتلك الإضافة وتستخدم متصفح جوجل كروم لتصفح الويب وتطوير موقعك بشكل عادي، ولذلك تلك الرسالة ليست مؤثرة وتستطيع تعطيل ظهورها كما أشار إليك قيس.

وأنا مثلاً لدي تنبيهات مثلها تظهر بسبب إضافات المتصفح لدي:

وتستطيع حذفها من خلال الضغط على الأيقونة التالية لحذف جميع الرسائل من الكونسول.

2023-07-30_12-14-56.png.e5df6d3e676fe919ddbbd61e2a46aa04.png

العيد العيد تليلي · 30 يوليو 2023

بتاريخ 4 ساعة قال Mustafa Suleiman:
التنبيه
"DevTools failed to load source map: Could not load content for chrome-extension://pejiikdiikindfooppgaidccahalenih/webspeed.js.map: System error: net: ERR_BLOCKED_BY_CLIENT"
يعني خطأ في تحميل خريطة المصدر (source map) في جوجل كروم، وتعرف خريطة المصدر بأنها ملف يرتبط بملف JavaScript وتساعد في تحسين عملية تصحيح الأخطاء وتصفح الشيفرة المصدرية عند تطوير الويب، ولكن، قد يحدث خطأ في تحميل خريطة المصدر أحيانًا، مما يؤدي إلى ظهور رسالة الخطأ التي رأيتها.

وتُبيّن الرسالة أنه لم يتمكن من تحميل محتوى خريطة المصدر من مسار الامتداد (extension) في جوجل كروم بعنوان pejiikdiikindfooppgaidccahalenih واسم الملف هو webspeed.js.map.

أما System error: net: :ERR_BLOCKED_BY_CLIENT،تشير إلى أن الخطأ تم حظره بواسطة العميل، والعميل هنا يمثل امتداد مثبت على متصفح جوجل كروم يحميك من بعض السلوكيات غير المرغوب فيها على الإنترنت.

وتعتبر خرائط المصدر (source maps) ملفات ضرورية للمطورين أثناء التطوير لكنها لا تؤثر على عمل الموقع أو التطبيق النهائي للمستخدمين العاديين، وتظهر تلك الرسالة للمطورين للإشارة إلى أن خريطة المصدر لهذا الامتداد قد فشلت في التحميل، وهي رسالة تحذيرية وليست ضارة بالضرورة، وبالطبع أنت لست مطور لتلك الإضافة وتستخدم متصفح جوجل كروم لتصفح الويب وتطوير موقعك بشكل عادي، ولذلك تلك الرسالة ليست مؤثرة وتستطيع تعطيل ظهورها كما أشار إليك قيس.

وأنا مثلاً لدي تنبيهات مثلها تظهر بسبب إضافات المتصفح لدي:

وتستطيع حذفها من خلال الضغط على الأيقونة التالية لحذف جميع الرسائل من الكونسول.

شكرا لك استاد

لاكن لمادا لا تضهر عناصر HTML في الكونسول كما اريدها في الصورة التالي

2023-07-29193258.jpg.8439992c88b20bec89cbcff2e5455d95.jpg

من فضلك استاد ممكن شرح مفصل لحل المشكلة

Mustafa Suleiman · 31 يوليو 2023

لم أفهم ما تريده بالضبط عذرًا، أنت تقوم بطباعة عنصار HTML؟

Hessen Nasser · 31 يوليو 2023

مرحباً،
هذه بعض المشاكل التي لاحظتها وتتسبب في عدم طبعاة العناصر بشكل صحيح:
1-

let vb3 = document.querySelector("a1");

هناك خطأ في هذا السطر. يبدو أنك تحاول استهداف عنصرٍ يحمل اسم الوسم "a1" وليس class أو ID. إذا كنت تريد استهداف عنصر معين بالـ class أو ID، يجب أن تستخدم العلامة "." قبل اسم الـ class أو "#" قبل اسم الـ ID. مثلاً: document.querySelector(".a1") إذا كانت الـ class هي "a1" تاكد من هذا الامر لانه من الممكن عدم ملاحظته بشكل جيد.

2-

let vb5 = document.getElementById(".a2");

هناك خطأ في هذا السطر. getElementById تستخدم للبحث عن عنصر بالـ ID، ولا يجب أن تمرر نقطة "." قبل اسم الـ ID. الشكل الصحيح للاستخدام هو getElementById("a2") إذا كان لديك عنصرٌ بهذا الـ ID.

العيد العيد تليلي · 31 يوليو 2023

بتاريخ 4 ساعة قال Mustafa Suleiman:

لم أفهم ما تريده بالضبط عذرًا، أنت تقوم بطباعة عنصار HTML؟

نعم

عند الأستاد الدي اتعلم منه عندما طبع عناصر HTML ضهرت له بشكل طبيعي في الكونسول كما موضع في الصورة الأتية :

2023-07-29193258.jpg.8439992c88b20bec89cbcff2e5455d95.jpg

لاكن عندما قمت بتطبيق العملي للكود مع ان الكود صحيح ضهرت لي النتيجة التي في الصورة التالية :

بعني في الكونسول كان عليه ان يطبع لي

<div id="my-div">a5c55</div>

لاكنه طبع لي كلمة null في الكونسول

ما الدي جعله يطبع لي الكلمة null بدل عناصر HTML وكيف احل المشكلة والمشكلة حتى مع بقية المطبوعات اي كأنه يقول لي لم يتعرف على العناصر

بنسبة للأر قام التي أمام العناصر انا المسؤل عنها قمت بي اضفاتها حتى اعرف العنصر من خلال رقمه وكانا هذا عندما كنت افهم المشكلة و أحاول حلها

بتاريخ 2 ساعة قال Hessen Nasser:
مرحباً،
هذه بعض المشاكل التي لاحظتها وتتسبب في عدم طبعاة العناصر بشكل صحيح:
1-
let vb3 = document.querySelector("a1");
هناك خطأ في هذا السطر. يبدو أنك تحاول استهداف عنصرٍ يحمل اسم الوسم "a1" وليس class أو ID. إذا كنت تريد استهداف عنصر معين بالـ class أو ID، يجب أن تستخدم العلامة "." قبل اسم الـ class أو "#" قبل اسم الـ ID. مثلاً: document.querySelector(".a1") إذا كانت الـ class هي "a1" تاكد من هذا الامر لانه من الممكن عدم ملاحظته بشكل جيد.

2-
let vb5 = document.getElementById(".a2");
هناك خطأ في هذا السطر. getElementById تستخدم للبحث عن عنصر بالـ ID، ولا يجب أن تمرر نقطة "." قبل اسم الـ ID. الشكل الصحيح للاستخدام هو getElementById("a2") إذا كان لديك عنصرٌ بهذا الـ ID.

شكرا لك أستاد لقد صححت الأخطاء لاكن لازلت أواجه نفس المشكلة

مشكلتي هي انه في الكونسول عندما طلبت من البرنامج انه يطبع لي العنصر الدي يحمل اسم id المرر اليه كما في الكود التالي :

let vb0 = document.getElementById("my-div");// ==> id استدعاء  عن طريق 
console.log(vb0);

و العنصر الدي كان يجب ان اجده في الكونسول هو :

     <div id="my-div">a5c55</div>

لاكنه بدل ان يطبع لي كود HTML الدي اريده في الأعلى طبع لي الكلمة null مكان الكود

يعني لمادا طبع لي الكلمة null مكان نصر HTML وكيف أحل المشكلة علما أن بقية المطبوعات تواجه نفس المشكلة كأنه يقول لي لم يتعرف على العنصر

تم التعديل في 31 يوليو 2023 بواسطة العيد العيد تليلي

Hessen Nasser · 1 أغسطس 2023

بتاريخ On 31‏/7‏/2023 at 20:06 قال العيد العيد تليلي:

لاكنه بدل ان يطبع لي كود HTML الدي اريده في الأعلى طبع لي الكلمة null مكان الكود

يعني لمادا طبع لي الكلمة null مكان نصر HTML وكيف أحل المشكلة علما أن بقية المطبوعات تواجه نفس المشكلة كأنه يقول لي لم يتعرف على العنصر

السبب الأكثر احتمالًا لظهور "null" في الكونسول بدلاً من العنصر الذي تبحث عنه هو أن العنصر المطلوب لم يتم العثور عليه باستخدام getElementById يجب عليك التاكد من ال Selector المكتوب مع العلم انه يفضل استدعاء العناصر من خلال استخدام querySelector() وتاكد جيدا من كتابة محدد العنصر بشكل سليم.

العيد العيد تليلي · 1 أغسطس 2023

بتاريخ 2 ساعة قال Hessen Nasser:

السبب الأكثر احتمالًا لظهور "null" في الكونسول بدلاً من العنصر الذي تبحث عنه هو أن العنصر المطلوب لم يتم العثور عليه باستخدام getElementById يجب عليك التاكد من ال Selector المكتوب مع العلم انه يفضل استدعاء العناصر من خلال استخدام querySelector() وتاكد جيدا من كتابة محدد العنصر بشكل سليم.

شكرا لك

لقد قمت بحل المشكلة و المشكلة كانت هو ملف ربط جافا سكريبت بي HTML وضعته في اول الكود و قمت بي انزاله وقد عمل البرنامج

شكرا استاذ انت وكل من حاول ان يساعدني جزاكم الله كل خير وبتوفيق لكم

مشكلة عدم اضهار عناصر HTML بصورة غير صحيحة

السؤال

العيد العيد تليلي

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

Recommended Posts

Kais Hasan

Mustafa Suleiman

العيد العيد تليلي

Mustafa Suleiman

Hessen Nasser

العيد العيد تليلي

Hessen Nasser

العيد العيد تليلي

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية