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

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

Ahmed Ebrahim11

السؤال

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

الان ان اظن اني افهم المشكله حيث قمت بعمل counter عندما اقوم بهمل sroll لحد سكشن معين ف الصفحه يعمل العداد ونجح الامر ولكن عند الذهاب لصفحه اخري لا يجد كود الجافا العنصر المحدد اي السكشن الذي يصل اليه عندما اقوم بعمل اسكرول فيعطي ايرور كيف اقوم بحل هذه المشكله انا اعمل ب webpack

let achieve = document.querySelector('#achievements');
let nums = document.querySelectorAll('.num');
let started = false;


window.onscroll = function(){
   if (window.scrollY >= achieve.offsetTop-200){
    if (!started){
        nums.forEach((num) => startCount(num))
    }
    started= true;
   }
}
// COUNTER FUNCTION
function startCount(el){
    let goal = el.dataset.goal;
    let count = setInterval(()=>{
        el.textContent++
        if(el.textContent == goal){
            clearInterval(count)
        }
    },9000/goal)
}

هذا هة الكود

Screenshot (558).png

تم التعديل في بواسطة Mustafa Suleiman
تعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

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

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

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

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

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

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

 

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

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...