كيفية تشغيل عداد جافا سكريبت على جميع الصفحات

هل يمكنك شرح المشكلة بشكل افضل، الا يوجد عنصر achievements في صفحة الثانية التي تنتقل إليها ؟

بتاريخ 2 ساعة قال عمر قره محمد:

هل يمكنك شرح المشكلة بشكل افضل، الا يوجد عنصر achievements في صفحة الثانية التي تنتقل إليها ؟

اها لا يوجد قمت بحل المشكله استاذي 

قمت بوضع الكود ف سكربت ف الصفحه الرئيسيه 

ولكن هل يوجد حل اخر افضل؟

بتاريخ 18 ساعة قال Ahmed Ebrahim11:

اها لا يوجد قمت بحل المشكله استاذي 

قمت بوضع الكود ف سكربت ف الصفحه الرئيسيه 

ولكن هل يوجد حل اخر افضل؟

لم أفهم مشكلتك بشكل كامل، طالما أن العنصر achievements  لا يتواجد سوى في الصفحة الرئيسية فلماذا تقوم بتشغيل الكود في صفحات أخرى عدى الصفحة الرئيسية؟

وعلي أي حال تحتاج إلى استخدام طريقة addEventListener() لإضافة مستمع حدث إلى كل صفحة تريد أن يعمل بها العداد، واستخدام مستمع الحدث لتشغيل الكود عندما يتم تحميل الصفحة.

أيضًا استخدام Optional chaining أي علامة ؟ لمنع قراءة العنصر في حال عدم وجوده في achieve.offsetTop.

أيضًا إضافة شرط لمنع استكمال الكود في حال لم تتواجد العناصر وهو   if(!achieve || !nums) return

let started;


function startCount(el){
    let goal = el.dataset.goal;
    let count = setInterval(()=>{
        el.textContent++
        if(el.textContent == goal){
            clearInterval(count)
        }
    },9000/goal)
}

// ADD LISTENER TO ALL PAGES
document.addEventListener('DOMContentLoaded', function(){
    achieve = document.querySelector('#achievements');
    nums = document.querySelectorAll('.num');
    started = false;
  
  if(!achieve || !nums) return

    // START COUNTER ON SCROLL
    window.onscroll = function(){
        if (window.scrollY >= achieve?.offsetTop-200){
            if (!started){
                nums.forEach((num) => startCount(num))
            }
            started= true;
        }
    }
});