خطأ في استخدام innerHTML

Artube Dev · 4 يناير 2021

مرحبا يا اساتذة كيف الحال ...

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

document.getElementById("price").innerHTML = لا تعمل و الconsol بيطلع error
ياريت في احد يساعدني بالموضوع اكون ممنون

Abdulhamid Hamsho2 · 4 يناير 2021

مرحبًا @Artube Dev،

هل يمكنك إرفاق ملفات المشروع كامل لنتمكن من مساعدتك.

شكرًا لك.

Yomna Raouf · 4 يناير 2021

مرحبًا..

لاحظ أن ريالة الخطأ تذكر لك أنه لا يمكن استخدام التابع innerHtml لبيانات لها القيمة null، لذلك أرجو منك أن تتأكد من أنك قمت بكتابة ال id بطريقة صحيحة و من أن العنصر له id بالقيمة price بالفعل و ليس صنف.

إن لم تتمكن من حل المشكلة يمكنك أن تُرفق الأكواد الخاصة بك كاملة و سنقوم بمساعدتك

------------

أيضًا إذا كان السؤال مُتعلق بأحد دروس الدورات أرجو أن تطرحه في تعليق أسفل الدرس نفسه في المرات القادمة

شكرًا لك

Wael Aljamal · 4 يناير 2021

مرحبا،

هل قمت بحفظ الملف قبل عرض الصفحة؟ (لاحظ أنه لم يتم حفظ التعديلات)

وتأكد هل يوجد عنصر لديك في صفحة HTML له المعرف id بقيمة price؟

<div id="price">
  your div
</div>

في حال استمرار المشكلة أرجو إرفاق الملفات كملف مضغوط.

شكرا لك

تم التعديل في 4 يناير 2021 بواسطة Wael Aljamal
توضيح الإجابة

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:18 قال Abdulhamid Hamsho:

مرحبًا @Artube Dev،

هل يمكنك إرفاق ملفات المشروع كامل لنتمكن من مساعدتك.

شكرًا لك.

أظهر المزيد

تم التعديل في 4 يناير 2021 بواسطة Artube Dev

Wael Aljamal · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:19 قال Wael Aljamal:

<div id="price"> your div </div>

أظهر المزيد

أرجو إضافة هذا الجزء إلى العنصر body وستعمل الصفحة.

لأن المشكلة هو كما ذكرتها

بتاريخ On 4‏/1‏/2021 at 20:19 قال Wael Aljamal:

وتأكد هل يوجد عنصر لديك في صفحة HTML له المعرف id بقيمة price؟

أظهر المزيد

بالتوفيق

Yomna Raouf · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:27 قال Artube Dev:

أظهر المزيد

كما ذكرت أكواد Html الخاصة بك لا تحتوي على حاوية لها المعرف price لذلك لم تتمكن جافاسكريبت من العثور عليه و ذكرت لك في رسالة الخطأ أنه له القيمة null أي ليس له قيمة.

لحل هذه المشكلة يمكنك إضافة هذا الوسم إلى ال body في html و حفظ الملف و سيعمل كل شئ بالشكل الصحيح:

<div id="price"></div>

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:27 قال Artube Dev:

أظهر المزيد

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

لهذا يمكنك تعريف عنصر يحتوي على الـ id="price" وذلك لتظهر النتيجة داخل صفحة الويب.

يمكنك مثلًا إضافة عنصر العنوان div يحتوي الـ id الذي تريدين كالمثال التالي:

<div id="price"></div>

وسوف يتم طباعة الناتج داخله.

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:31 قال Yomna Raouf:

لقد قمت باضافة الكود الى ال HTML لاكن للاسف لم يحدث شيء

أظهر المزيد

Yomna Raouf · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:38 قال Artube Dev:

لقد قمت باضافة الكود الى ال HTML لاكن للاسف لم يحدث شيء

أظهر المزيد

هل قمت بحفظ الملف بعد التعديل و تحديث المتصفح بالضغط على أيقونة refresh أو أزرار ctrl + R بعد التعديل؟

Artube Dev · 4 يناير 2021

نعم عملت Relod لاكن لافائدة

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:38 قال Artube Dev:

لقد قمت باضافة الكود الى ال HTML لاكن للاسف لم يحدث شيء

أظهر المزيد

هل قمت بإضافة كود HTML داخل عنصر <body> حيث يجب عليك إضافة العنصر <div> داخل العنصر <body>

كما في الشكل التالي.

<body>
  <div id="price"></div>
</body>

Yomna Raouf · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:44 قال Artube Dev:

نعم عملت Relod لاكن لافائدة

أظهر المزيد

هل يمكنك إرفاق ملفات المشروع - الملفات نفسها و ليس صور حتى نتمكن من مساعدتك

Artube Dev · 4 يناير 2021

هذه الملفات اشكركم جدا على المجهود

index.htmlFetching info...

test.jsFetching info...

تم التعديل في 4 يناير 2021 بواسطة Artube Dev

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:48 قال Artube Dev:

هذه الملفات اشكركم جدا على المجهود

index.htmlFetching info...

test.jsFetching info...

أظهر المزيد

يجب عليك أن تضعي عنصر <script> داخل عنصر <body> أسفل الصفحة حتى يتم تنفيذ الكود بالترتيب الصحيح.

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

يجب أن يتعرف على العنصر الحاوي على الـ id أولًا من ثم الوصول إليه من خلال كود جافاسكريبت

<body>
    <div id="price"> your div </div>

	<script src="test.js"></script>
</body>

بهذا الشكل تحل المشكلة

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:48 قال Artube Dev:

هذه الملفات اشكركم جدا على المجهود

index.htmlFetching info...

test.jsFetching info...

أظهر المزيد

Wael Aljamal · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:48 قال Artube Dev:

هذه الملفات اشكركم جدا على المجهود

index.htmlFetching info...

test.jsFetching info...

أظهر المزيد

مرحبا،

إن طريقة عمل المتصفح في قراءة شيفرات HTML هي تسلسلية من الأعلى للأسفل.

عند تضمين ملف جافا سكربت سيقوم بتنفيذه حتى نهايته ..

وعند الوصول لمكان إسناد قيمة المتحول myPrice لعنصر له المعرف id=price سيكون غير موجود في هذه اللحظة لأن المتصفح لم يصل للعنصر نفسه div في شيفرة HTML داخل body.

فنقوم بنقل جزء تضمين ملف جافا سكربت لآخر العنصر body ليتسنى له إنشاء العنصر div ثم تنفيذ الشيفرة الخاصة بجافا سكربت عليه.

تعديل آخر في اسم ملف التنسيق حيث نسيت وضع اقتباس حول الاسم (نسيت واحد منهم)

<link rel="staylsheet" href="file.css" type="text/css">
____________________________^

الملفات بعد التعديل والترتيب:

index.htmlFetching info...

test.jsFetching info...

تعديل: يوجد فاصلة منقوطة في نهاية تعليمة تعريف myPrice يفضل استبدالها بفاصلة.وهذا لايسبب مشكلة، لأن في جافا سكربت ليس من الضروري كتابة var - let أما المتغيرات ليتم تعريفها. (المتغيرات التي بعد myprice)

بالتوفيق

سمير عبود · 4 يناير 2021

مرحباً،

سبب الخطأ هو أن أكواد الجافاسكربت حالياً يتم تنفيذها قبل أن تتحمل عناصر الصفحة و بالتالي عند البحث عن العُنصر ذو المُعرف price لم يكن موجود بعد على الصفحة و بالتالي فإن:

document.getElementById("price")

تعود ب null و لا يُمكن تطبيق الخاصية innerHTML على null

لحل المُشكل هناك عدة الطرق من بينها أن نُخبر javascript أن تنتظر حتى تتحمل الصفحة و ذلك عن طريق الكود التالي:

document.addEventListener("DOMContentLoaded", function(event) { 
  // هنا نضع الأكواد
});

أي بهذا الشكل:

document.addEventListener("DOMContentLoaded", function(event) { 
    //do work

    var myPrice = 1000; 

    myNewprice = 900,
    
    myDiscont = myPrice - myNewprice + 500; //1000 - 900 + 500 = 600
       
    


    document.getElementById("price").innerHTML = myPrice;

});

و بهذا الشكل لن يتم تنفيذ شيفرات الجافاسكربت إلا بعد تحميل كافة عناصر الصفحة.

الطريقة الثانية بنقل وسم الscript إلى قبل وسم الإغلاق <body/> :

<body>
    <div id="price"> your div </div>

  
    <script src="test.js"></script>
</body>

و هذا هو المكان المُفضل لتضمين ملفات الجافاسكربت.

لديك خطأ مطبعي آخر في هذا السطر:

<link rel="staylsheet" href=file.css" type="text/css">

الصح:

<link rel="stylesheet" href="file.css" type="text/css">

بالتوفيق.

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:48 قال Artube Dev:
بتاريخ On 4‏/1‏/2021 at 21:09 قال عبود سمير:
مرحباً،

سبب الخطأ هو أن أكواد الجافاسكربت حالياً يتم تنفيذها قبل أن تتحمل عناصر الصفحة و بالتالي عند البحث عن العُنصر ذو المُعرف price لم يكن موجود بعد على الصفحة و بالتالي فإن:
document.getElementById("price")
تعود ب null و لا يُمكن تطبيق الخاصية innerHTML على null

لحل المُشكل هناك عدة الطرق من بينها أن نُخبر javascript أن تنتظر حتى تتحمل الصفحة و ذلك عن طريق الكود التالي:
document.addEventListener("DOMContentLoaded", function(event) { 
  // هنا نضع الأكواد
});
أي بهذا الشكل:
document.addEventListener("DOMContentLoaded", function(event) { 
    //do work

    var myPrice = 1000; 

    myNewprice = 900,
    
    myDiscont = myPrice - myNewprice + 500; //1000 - 900 + 500 = 600
       
    


    document.getElementById("price").innerHTML = myPrice;

});
و بهذا الشكل لن يتم تنفيذ شيفرات الجافاسكربت إلا بعد تحميل كافة عناصر الصفحة.

الطريقة الثانية بنقل وسم الscript إلى قبل وسم الإغلاق <body/> :
<body>
    <div id="price"> your div </div>

  
    <script src="test.js"></script>
</body>
و هذا هو المكان المُفضل لتضمين ملفات الجافاسكربت.

لديك خطأ مطبعي آخر في هذا السطر:
<link rel="staylsheet" href=file.css" type="text/css">
الصح:
<link rel="stylesheet" href="file.css" type="text/css">
بالتوفيق.
أظهر المزيد
مرحبا اخي العزيز لقد قمت بالطريقتين ولاكن تكرر نفس الامر وجودError
أظهر المزيد

سمير عبود · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 21:26 قال Artube Dev:

مرحبا اخي العزيز لقد قمت بالطريقتين ولاكن تكرر نفس الامر وجودError

أظهر المزيد

هذه ملفات تطبيقك يُمكنك تجربتها: th.zip يبدو أنك لا تحفظ التغييرات التي تُجريها على الملفات.

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 21:32 قال عبود سمير:

هذه ملفات تطبيقك يُمكنك تجربتها: th.zip قم بتجربتها يبدو أنك لا تحفظ التغييرات التي تُجريها على الملفات.

أظهر المزيد

الملفات محفوظة عندي في فولدر والبرنامج يعمل حفظ تلقائي للتغيرات

اعتقد المشكلة في المتصفح

سمير عبود · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 21:38 قال Artube Dev:

الملفات محفوظة عندي في فولدر والبرنامج يعمل حفظ تلقائي للتغيرات

اعتقد المشكلة في المتصفح

أظهر المزيد

هل قمت بتحميل الملفات التي أرسلتها لك و جربتها؟ يُمكن أنك أخطأت في شيء ما فهي تعمل عندي و يتم عرض السعر 1000 في الصفحة بشكل عادي

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 20:12 قال Artube Dev:

مرحبا يا اساتذة كيف الحال ...

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

document.getElementById("price").innerHTML = لا تعمل و الconsol بيطلع error

ياريت في احد يساعدني بالموضوع اكون ممنون

أظهر المزيد

الخلل تكرر معي في ملفات الcss ايضا

ممكن الخلل في المتصفح او في المحرر vscode

بتاريخ On 4‏/1‏/2021 at 21:42 قال عبود سمير:

هل قمت بتحميل الملفات التي أرسلتها لك و جربتها؟ يُمكن أنك أخطأت في شيء ما فهي تعمل عندي و يتم عرض السعر 1000 في الصفحة بشكل عادي

أظهر المزيد

نعم حملتها ولم تشتغل

سمير عبود · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 21:43 قال Artube Dev:

نعم حملتها ولم تشتغل

أظهر المزيد

جرب فتحها بمُتصفح آخر

Artube Dev · 4 يناير 2021

بتاريخ On 4‏/1‏/2021 at 21:46 قال عبود سمير:

جرب فتحها بمُتصفح آخر

أظهر المزيد

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

محمد ابو خشيم · 6 يناير 2021

و عليكم السلام و رحمة الله و بركاته

مبدئيا أنقل <script> من الheader لأسفل حتى يتمكن المتصفح من تحميل الHTML أولا. ثم أنك لم تضف أصلا عنصرا يحمل id = "price و بالتالي فإن الخطأمنطقي.

آلية عمل جافا سكريبت مع DOM مختلفة تماما عن آلية عمل اللغة نفسها لذا أفضل طريقة لتضمين ملفات جافا سكريبت في الصفحات هو بإضافتها لأسفل الصفحة قبل إغلاق </body>

زياد علي احمد الحربي · 7 يونيو 2023

وانا كمان غيرت المحرر وحصلت برضوerror

Mustafa Suleiman · 8 يونيو 2023

بتاريخ On 7‏/6‏/2023 at 21:26 قال زياد علي احمد الحربي:

وانا كمان غيرت المحرر وحصلت برضوerror

أظهر المزيد

ربما المشكلة لديك أنك لم تقم بربط ملف جافاسكريبت في HTML بشكل صحيح تأكد من ذلك ومن كتابة اسم الملف والمسار بشكل صحيح.

وأيضًا ربما هناك خطأ في اسم الكلاس أو الـ id وإليك مثال يعمل بشكل سليم، وقد كتبت لك السكريبت داخل كود HTML تجنبًا للمشاكل قم بتجربته.

<!DOCTYPE html>
<html>
<head>
    <title>مثال عن استخدام innerHTML</title>
</head>
<body>
    <h1 id="example-heading">مرحبًا بك!</h1>
    <div id="example-content">
        <p>هذا هو المحتوى الأصلي.</p>
    </div>

    <script type="text/javascript">
        // استهدف عنصر العنوان
        const heading = document.getElementById('example-heading');

        // تحديث المحتوى باستخدام innerHTML
        heading.innerHTML = 'مرحبًا بكم في مثال innerHTML!';

        // استهدف عنصر المحتوى
        const content = document.getElementById('example-content');

        // تحديث المحتوى الداخلي للعنصر بواسطة innerHTML
        content.innerHTML = `<p>هذا هو المحتوى المحدث باستخدام <strong>innerHTML</strong> و <strong>ES6</strong>!</p>`;
    </script>
</body>
</html>

وهناك نقاش آخر لنفس المشكلة أنصحك بالإطلاع عليه:

Abdullah Mohammed6 · 5 يناير 2021

السلام عليكم ورحمة الله وبركاته

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

بعض الإخوة ذكر لك أن الخطأ هو في إيراد عنصر حاوي في ملف الhtml وهو

<div id="price"></div>

وهذا صحيح تماماً وأتفق معهم ولكن هناك مشكلة أخرى مهمة للغاية وبسيطة للغاية في كود الجافاسكربت وهو أنك أضفت ; بعد أن قمت بتعريف المتغير الأول وهو myPrice وكان من الواجب أن تضع , فقط حتى تتمكن اللغة من قراءة بقية المتغيرات وهذا هو الحل ببساطة

الخطأ

var myPrice = 1000;
	myNewprice = 900,
    myDiscont = myPrice - myNewprice + 500;

الصواب

var myPrice = 1000,
	myNewprice = 900,
    myDiscont = myPrice - myNewprice + 500;

هذا كل ما في الأمر أن تضيف , بعد 1000

وإن بقي لديك أي استشكال آخر فاسألني وسأجيب عنك إن شاء الله

خطأ في استخدام innerHTML

السؤال

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

Recommended Posts

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

إعلانات

تابعنا على