addEventlesener ( JavaScript ) استفسار

بتاريخ 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");
// })

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

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

بتاريخ 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

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