خطأ في استخدام 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

بتاريخ 9 دقائق مضت قال Abdulhamid Hamsho:

مرحبًا @Artube Dev،

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

شكرًا لك.

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

Wael Aljamal · 4 يناير 2021

بتاريخ 9 دقائق مضت قال Wael Aljamal:

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

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

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

بتاريخ 10 دقائق مضت قال Wael Aljamal:

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

بالتوفيق

Yomna Raouf · 4 يناير 2021

بتاريخ 10 ساعات قال Artube Dev:

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

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

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

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ 6 دقائق مضت قال Artube Dev:

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

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

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

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

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

Artube Dev · 4 يناير 2021

بتاريخ 5 دقائق مضت قال Yomna Raouf:

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

Yomna Raouf · 4 يناير 2021

بتاريخ 10 ساعات قال Artube Dev:

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

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

Artube Dev · 4 يناير 2021

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

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ 4 دقائق مضت قال Artube Dev:

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

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

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

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

Yomna Raouf · 4 يناير 2021

بتاريخ 10 ساعات قال Artube Dev:

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

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

Artube Dev · 4 يناير 2021

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

index.html

test.js

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

Abdulhamid Hamsho2 · 4 يناير 2021

بتاريخ 9 دقائق مضت قال Artube Dev:

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

index.html

test.js

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

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

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

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

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

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

Artube Dev · 4 يناير 2021

بتاريخ 10 دقائق مضت قال Artube Dev:

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

index.html

test.js

Wael Aljamal · 4 يناير 2021

بتاريخ 13 ساعات قال Artube Dev:

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

index.html

test.js

مرحبا،

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

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

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

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

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

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

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

index.html

test.js

تعديل: يوجد فاصلة منقوطة في نهاية تعليمة تعريف 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

بتاريخ 22 دقائق مضت قال Artube Dev:
بتاريخ 15 دقائق مضت قال عبود سمير:
مرحباً،

سبب الخطأ هو أن أكواد الجافاسكربت حالياً يتم تنفيذها قبل أن تتحمل عناصر الصفحة و بالتالي عند البحث عن العُنصر ذو المُعرف 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

بتاريخ 6 دقائق مضت قال Artube Dev:

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

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

Artube Dev · 4 يناير 2021

بتاريخ 2 دقائق مضت قال عبود سمير:

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

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

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

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

بتاريخ 1 دقيقة مضت قال Artube Dev:

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

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

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

Artube Dev · 4 يناير 2021

بتاريخ منذ ساعة مضت قال Artube Dev:

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

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

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

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

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

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

بتاريخ 1 دقيقة مضت قال عبود سمير:

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

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

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

بتاريخ 2 دقائق مضت قال Artube Dev:

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

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

Artube Dev · 4 يناير 2021

بتاريخ 3 دقائق مضت قال عبود سمير:

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

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

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

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

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

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

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

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

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

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

Mustafa Suleiman · 8 يونيو 2023

بتاريخ 11 ساعة قال زياد علي احمد الحربي:

وانا كمان غيرت المحرر وحصلت برضو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>