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

addEventlesener ( JavaScript ) استفسار

zainb mohd

السؤال

Recommended Posts

  • 0
بتاريخ 24 دقائق مضت قال zainb mohd:

لم ينجح معي هذان الحلان.

يبدو انه لديك عدة مشاكل والشكل الصحيح لملف الـ js يجب ان يكون كالتالي :

const bt = document.querySelectorAll(".bt")
bt.forEach(item => {
  item.addEventListener("click", () => {
    item.innerHTML = "✔ Done"
    item.append.innerText = "ss"
    item.style.backgroundColor = "rgb(0, 188, 44)"
    item.style.color = "white"
    const body = document.getElementById("bodyy")
    const creat = document.createElement("h1")
    creat.innerText = "مبرووووووووووك "
    body.prepend(creat)
    creat.classList.add("ccreat")
    setTimeout(() => {
      creat.style.transform = "translateX(-200vw)"
    }, 1000);
    setTimeout(() => {
      creat.remove()
    }, 4000);

    const show = document.createElement("h3")
    show.innerText = "عرض المشنريات "
    body.prepend(show)
    // لست بحاجة لاعطاء اي كلاس
    // show.classList.add("sshow")
    // نضيف الحدث من هنا مباشرةً
    // show وذلك لأن الكود الخاص بإضافة الحدث معتمد على وجود العنصر 
    // موجوداً اصلاً show في الشكل السابق كنت تضيف الـحدث قبل ان يكون الـ 
    // اما هنا لن يضاف الحدث إلا عندما يتم انشاء العنصر
    show.addEventListener("click", () => {
      // قبل استخدامه foterdiv لم تقم بتعريف المتغير 
      // foterdiv.style.transform = "  translateX(100vw) "
      // console.log("sshddow");
      
      // الشكل الصحيح هو
      const bigdiv = document.querySelector(".bigdiv")
      const foterdiv = document.querySelector(".foterdiv")
      bigdiv.style.transform = "  translateX(-100vw) "
      foterdiv.style.transform = "  translateX(-100vw) "
    })

  })
})
const x = document.querySelector(".x")
x.addEventListener("click", () => {
  const bigdiv = document.querySelector(".bigdiv")
  const foterdiv = document.querySelector(".foterdiv")
  bigdiv.style.transform = "  translateX(-100vw) "
  foterdiv.style.transform = "  translateX(-100vw) "
})
// بعد .sshow هنا لا يوجد اي عنصر يحتوي الكلاس المسمى 
// bt وذلك لأنه يتم تعريفه عند النقر على العنصر صاحب الكلاس
// bt و هذا الكود يتم تنفيذه لمرة واحدة وقبل النقر على العنصر صاحب الكلاس
// غير موجود .sshow ولذلك يعطي الخطأ الذي يقول ان العنصر 
// const sshow = document.querySelector(".sshow")
// sshow.addEventListener("click", () => {
//     foterdiv.style.transform = "  translateX(100vw) "
//     console.log("sshddow");
// })

 

 

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

  • 0

لم يعمل الكود الخاص بك لأن 

const sshow = document.querySelector(".sshow")

يعيد array من العناصر وليس عنصر وحيد وبالتالي لإضافة event للعنصر الخاص بك يجب ان تقوم بتحديده كالتالي :

 sshow[0].addEventListener(...)

طريقة ثانية لحل المشكلة هي :

استخدام الـ id بدلاً من الـ class كالتالي :

show.id = "sshow";
// بدلاً من
show.classList.add("sshow")

ثم يصبح الاستدعاء كالتالي :

const sshow = document.querySelector("#sshow")
// بدلاً من 
const sshow = document.querySelector(".sshow")

وهذه ستعيد العنصر الوحيد الذي يملك الـ id المسمى sshow

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

  • 0
بتاريخ 52 دقائق مضت قال عمر قره محمد:

لم يعمل الكود الخاص بك لأن 


const sshow = document.querySelector(".sshow")

يعيد array من العناصر وليس عنصر وحيد وبالتالي لإضافة event للعنصر الخاص بك يجب ان تقوم بتحديده كالتالي :


 sshow[0].addEventListener(...)

طريقة ثانية لحل المشكلة هي :

استخدام الـ id بدلاً من الـ class كالتالي :


show.id = "sshow";
// بدلاً من
show.classList.add("sshow")

ثم يصبح الاستدعاء كالتالي :


const sshow = document.querySelector("#sshow")
// بدلاً من 
const sshow = document.querySelector(".sshow")

وهذه ستعيد العنصر الوحيد الذي يملك الـ id المسمى sshow

لم ينجح معي هذان الحلان.

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...