مشكله في استدعاء فانكشن في الجافاسكريبت

السلام عليكم .

الخطأ في الكود أن حضرتك قمتى بوضع ال eventListener بداخل ال cx()  function 

bttn.addEventListener("click",(params) => {
 let er= setInterval(() => { cx();  } , 3);
setInterval(() => {
  clearInterval(er)
}, 3000);

})

إذا فإن هذا الجزء من الكود لن يتم تنفيذه إلا باستدعاء ال cx() function  حيث ان الدوال لا يتم تنفيذ الاكواد بداخلها إلا عندما يتم إستدعائها.

وال cx() function لا تستدعى إلا بالضغط على زر randam.

إذا قمتى بالضغط على زر randam ثم الضغط على randam heart ستجدينه يعمل .

وبذلك فإن  الحل هو وضع هذا الجزء خارج نطاق ال cx() function ومن الافضل وضعها فى ال global scope في نهاية الكود .

 let bttn =document.getElementById("bttn")
bttn.addEventListener("click",(params) => {
 let er= setInterval(() => { cx();  } , 3);
setInterval(() => {
  clearInterval(er)
}, 3000);

})

المشكلة هي ان الوظيفة cx ليست هي المسؤولة عن ظهور القلوب على الشاشة،

ولكن المسؤول عن ذلك هو الوظيفة التالي :

let er = setInterval(() => { cx(); }, 3);
setInterval(() => {
  clearInterval(er)
}, 3000);

والتي انت جعلتها تعمل عند النقر على الزر randam heart في هذا الجزء من الكود :

bttn.addEventListener("click",(params) => {
  let er= setInterval(() => { cx();  } , 3);
  setInterval(() => {
    clearInterval(er)
  }, 3000);

})

وهذا الجزء من الكود وضعته في الوظيفة cx نفسها وهذا خطأ.

الصحيح ان يكون شكل الكود كالتالي :

let cx = () => {
    let contenerheart = document.getElementById("contenerheart");
    let hhart = document.createElement("div");
    hhart.classList.add("hart");
    hhart.innerText = "❤️";
    contenerheart.append(hhart);
    console.log(contenerheart);
    hhart.style.left = `${Math.random() * 100}%`
    hhart.style.animationDuration = `${Math.random() * 2}s`
};
const doCx = () => {
    let er = setInterval(() => { cx(); }, 3);
    setInterval(() => {
        clearInterval(er)
    }, 3000);
}
let bttn = document.getElementById("bttn")
bttn.addEventListener("click", (params) => {
    doCx()
})

ولجعل الزر randam يعمل يجب استدعاء الـ doCx بدلا عن الـ cx كالتالي :

btn.addEventListener("click", () => {
    freme.innerHTML = inner[l];
    l++;
    if (l > inner.length - 1) {
        l = 0;
    }
    doCx()
});

فيصبح ملف الجافاسكريبت بالكامل بالشكل التالي : index.js