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

السؤال

نشر (معدل)

 

مرحبا 

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

2023-07-29184839.thumb.jpg.4cdd183a5049bec2cd9c79ed59cf65a2.jpg

هاده أكواد 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");// ==>

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

 

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

Recommended Posts

  • 1
نشر

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

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

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

image.png.f635925ffa56a4476428b05fc1dc4e59.png

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

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

 

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

  • 0
نشر

التنبيه

"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) ملفات ضرورية للمطورين أثناء التطوير لكنها لا تؤثر على عمل الموقع أو التطبيق النهائي للمستخدمين العاديين، وتظهر تلك الرسالة للمطورين للإشارة إلى أن خريطة المصدر لهذا الامتداد قد فشلت في التحميل، وهي رسالة تحذيرية وليست ضارة بالضرورة، وبالطبع أنت لست مطور لتلك الإضافة وتستخدم متصفح جوجل كروم لتصفح الويب وتطوير موقعك  بشكل عادي، ولذلك تلك الرسالة ليست مؤثرة وتستطيع تعطيل ظهورها كما أشار إليك قيس.

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

Snag_4146b1.thumb.png.4966b64c12d8c4236e4a30bc1aa54db4.png

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

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

  • 0
نشر
بتاريخ 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) ملفات ضرورية للمطورين أثناء التطوير لكنها لا تؤثر على عمل الموقع أو التطبيق النهائي للمستخدمين العاديين، وتظهر تلك الرسالة للمطورين للإشارة إلى أن خريطة المصدر لهذا الامتداد قد فشلت في التحميل، وهي رسالة تحذيرية وليست ضارة بالضرورة، وبالطبع أنت لست مطور لتلك الإضافة وتستخدم متصفح جوجل كروم لتصفح الويب وتطوير موقعك  بشكل عادي، ولذلك تلك الرسالة ليست مؤثرة وتستطيع تعطيل ظهورها كما أشار إليك قيس.

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

Snag_4146b1.thumb.png.4966b64c12d8c4236e4a30bc1aa54db4.png

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

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

شكرا لك  استاد 

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

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

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

  • 0
نشر

مرحباً،
هذه بعض المشاكل التي لاحظتها وتتسبب في عدم طبعاة العناصر بشكل صحيح:
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.

  • 0
نشر (معدل)
بتاريخ 4 ساعة قال Mustafa Suleiman:

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

نعم 

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

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

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

2023-07-31175833.thumb.jpg.dcc64978f535fcf35744cc85203d561a.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  وكيف أحل المشكلة علما أن بقية المطبوعات  تواجه نفس المشكلة كأنه يقول لي لم يتعرف على العنصر 

تم التعديل في بواسطة العيد العيد تليلي
  • 0
نشر
بتاريخ On 31‏/7‏/2023 at 20:06 قال العيد العيد تليلي:

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

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

 

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

  • 0
نشر
بتاريخ 2 ساعة قال Hessen Nasser:

 

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

شكرا لك 

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...