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

النص لا يتعدل في JS

Asma'a

السؤال

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function () {
            document.getElementById("test").innerHTML = "asma";}
        </script>
    </head>
    <body>
        <div class="test">C</div>
    
    </body>
</html>

لماذا لاتعمل الدالة وأنا أستخدمت window.onload

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

مرحبًا أسماء.

لاحظي أنك قمت بتحديد الحاوية باستخدام التابع getElementById بالرغم من أن test تعتبر صنفًا class و ليس مُعرفًا id.

<div class="test">C</div>

فقط قومي بتعديل class إلى id و سيعمل بشكل صحيح:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function () {
        document.getElementById("test").innerHTML = "asma";}
    </script>
  </head>
  <body>
    <div id="test">C</div>

  </body>
</html>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

مرحباً بك،

بتاريخ 3 دقائق مضت قال أسماء عبدالله محمود النظاري:

لماذا لاتعمل الدالة وأنا أستخدمت window.onload

لم يتغير شيء لأنه لا يوجد في المستند أي عُنصر يحمل المُعرف test حتى يتغير النص الموجود داخل الdiv يجب إضافة الid المطلوب كما هو موضح أدناه:

<div class="test" id="test">C</div>

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

window.onload = function () {
  document.getElementsByClassName("test")[0].innerHTML = "asma";
}

التابع getElementsByClassName يأخذ كمعامل إسم الصنف و يُرجع مصفوفة تضم كل العناصر التي تملك صنف التنسيقات المطلوب. هناك عدة توابع أخرى يُمكنك إستخدامها ك

  • querySelector

  • getElementsByTagName

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
/* jslint plus plus : true, evil:true*/
/*global console ,alert ,prompt*/

شكراً لك,لوسمحتي لماذا نستخدم هذا التعليق بداية البرنامج!!!

بتاريخ 11 ساعات قال عبود سمير:

مرحباً بك،

لم يتغير شيء لأنه لا يوجد في المستند أي عُنصر يحمل المُعرف test حتى يتغير النص الموجود داخل الdiv يجب إضافة الid المطلوب كما هو موضح أدناه:


<div class="test" id="test">C</div>

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


window.onload = function () {
  document.getElementsByClassName("test")[0].innerHTML = "asma";
}

التابع getElementsByClassName يأخذ كمعامل إسم الصنف و يُرجع مصفوفة تضم كل العناصر التي تملك صنف التنسيقات المطلوب. هناك عدة توابع أخرى يُمكنك إستخدامها ك

  • querySelector

  • getElementsByTagName

بالتوفيق.

في حال أردت إرجاع أكثر من عنصر كيف أحدد المصفوفة,أم أزيد فقط رقم هكذا [8]

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 9 ساعات قال أسماء عبدالله محمود النظاري:

/* jslint plus plus : true, evil:true*/
/*global console ,alert ,prompt*/

شكراً لك,لوسمحتي لماذا نستخدم هذا التعليق بداية البرنامج!!!

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

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

إذا كان التعليقان موجودان بصورة افتراضية في محرر الأكواد الخاص بك فدعيهم كما هما، فربما يكون لهم ضرورة لمحرر الأكواد فقط لا أكثر

بتاريخ 10 ساعات قال أسماء عبدالله محمود النظاري:

في حال أردت إرجاع أكثر من عنصر كيف أحدد المصفوفة,أم أزيد فقط رقم هكذا [8]

المصفوفة التي نحصل عليها من getElementsByClassName تحتوي جميع العناصر التي لها صنف معين test مثلًا، و هذه العناصر تكون مرتبة داخل المصفوفة حسب ترتيبها في الأكواد.

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.onload = function () {
        document.getElementsByClassName("test")[0].innerHTML = "asma";
        document.getElementsByClassName("test")[1].innerHTML = "asma1";
        document.getElementsByClassName("test")[2].innerHTML = "asma2";
        document.getElementsByClassName("test")[3].innerHTML = "asma3";
      }
    </script>
  </head>
  <body>
    <div class="test">A</div>
    <div class="test">B</div>
    <div class="test">C</div>
    <div class="test">D</div>

  </body>
</html>

و يمكننا تحديد العنصر الذي نريده باستخدام ال index كما نفعل مع المصفوفات في JS بصورة طبيعية

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 11 دقائق مضت قال أسماء عبدالله محمود النظاري:

/* jslint plus plus : true, evil:true*/ /*global console ,alert ,prompt*/

يتم إضافة هذه التعليقات لمُساعدة مُحرر الأكواد و عدم إعطاء تحذيرات متعلقة بهذه الأشياء على سبيل المثال لو كتبنا في برنامج Brackets:

console.log('hello');

سيُعطي البرنامج الإنذار أو التحذير التالي:

jslint_warning_console.PNG.6f0be85dc29b9165ca11b9ea5619abb9.PNG

أي أنه لم يتعرف على console لكن الكود سيعمل في المتصفح بشكل جيد و سيطبع hello، لكن لتلافي هذا الإنذار يُمكن كتابة:

window.console.log('hello');

و سيختفي الإنذار، أو يُمكننا إضافة التعليق التالي:

/*global console*/

في بداية الملف. فكما تلاحظي هذه الأسطر فقط لمُساعدة المُحرر.

بتاريخ 27 دقائق مضت قال أسماء عبدالله محمود النظاري:

في حال أردت إرجاع أكثر من عنصر كيف أحدد المصفوفة,أم أزيد فقط رقم هكذا [8]

هذا يعتمد على الحالة التي تواجهك و على الشيء الذي تريدين القيام به مثلا إذا كان لدينا:

<div class="test">A</div>
<div class="test">B</div>
<div>C</div>
<div class="test">D</div>
<div class="test">E</div>

و نريد تغيير النص لكل div يحمل الصنف test إلى "asma" سنقوم ب:

window.onload = function () {
  document.querySelectorAll("div.test").forEach(elm => elm.innerText = "asma")
}

بالتوفيق.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...