Problem with position confetti

[MamodaWebdesign]

If I enter a website for the first time and i click on a button where i added the confetti, is the position different than the input. After I entered another page is the position the same as the input and is there no problem.

Is there any solution for this?

function my_custom_confetti_scripts() {
    // Voeg de Canvas Confetti-bibliotheek toe
    wp_enqueue_script('canvas-confetti', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js', array(), '1.4.0', true);
    // Voeg je eigen script toe
    wp_add_inline_script('canvas-confetti', '
        window.addEventListener("load", function() { // Wacht tot de volledige pagina is geladen
            // Selecteer de knoppen met de class .confetti-btn
            const buttons = document.querySelectorAll(".confetti-btn");
            // Selecteer de elementen met de class .onze-feesten-titel
            const titles = document.querySelectorAll(".onze-feesten-titel");
            // Functie om confetti te laten vallen
            function launchConfetti(xOrigin, yOrigin) {
                confetti({
                    particleCount: 100,          // Aantal deeltjes
                    spread: 70,                  // Verspreiding van confetti
                    origin: { x: xOrigin, y: yOrigin }, // Origine voor de confetti
                    colors: ["#FFFFFF"], // Confetti-kleuren
                });
				 console.log("launch confetti", xOrigin, yOrigin); 
            }
            // Voeg een event listener toe voor elke .confetti-btn knop
            buttons.forEach(button => {
                button.addEventListener("mouseenter", function() {
                    // Bereken de positie van de knop
                    const rect = button.getBoundingClientRect();
                    const xOrigin = 0.6;
                    const yOrigin = 0.1;
                    console.log("Button position:", xOrigin, 0.1); // Debugging van de positie
                    // Gebruik de berekende positie voor de confetti
                    launchConfetti(xOrigin, yOrigin);
                });
            });
            // Voeg een event listener toe voor elke .onze-feesten-titel
            titles.forEach(title => {
                title.addEventListener("mouseenter", function() {
                    title.style.opacity = 0; // Titel verdwijnt
                    launchConfetti(0.5, 0.5); // Positie voor de titel (midden van het scherm)
                });
                // Herstel de titel bij de mouse-out actie
                title.addEventListener("mouseleave", function() {
                    title.style.opacity = 1; // Zet de titel terug zichtbaar
                });
            });
        });
    ', 'after');
}
add_action('wp_enqueue_scripts', 'my_custom_confetti_scripts');