Why my second script does'nt know the function in the first script?

Question

The function ScrollToStage is using the function waitForScrollEnd defined in the first script. If I don't copy this function here it doesn't work, I got a reference error function waitForScrollEnd is not defined... It's very ugly, I can't let my code like that. What can I do ?

@push('scripts')
        <script src="{{asset('js/home/home.js')}}"></script>
        <script>

            function scrollHandler(element = null) {
                return {
                    height: 0,
                    element: element,
                    calculateHeight(position) {
                        const distanceFromTop = this.element.offsetTop
                        const contentHeight = this.element.clientHeight
                        const visibleContent = contentHeight - window.innerHeight
                        const start = Math.max(0, position - distanceFromTop)
                        const percent = (start / visibleContent) * 100;
                        requestAnimationFrame(() => {
                            this.height = percent;
                        });
                    },
                    init() {
                        this.element = this.element || document.body;
                        this.calculateHeight(window.scrollY);
                    }
                };
            }

            let listFormations = document.getElementById('list-formations');
            function scrollToStage(upOrDown) {

                let myCurrentStage = parseInt(listFormations.__x.$data.currentStage);
                console.log('stage'+(myCurrentStage+1));

                let nextStage = document.getElementById('stage'+(myCurrentStage+1));
                let previousStage = document.getElementById('stage'+(myCurrentStage-1));

                if (upOrDown === 'down'){
                    //console.log(nextStage);
                    if(typeof(nextStage) != 'undefined' && nextStage != null){

                        nextStage.scrollIntoView({behavior: "smooth"});

                        callbackAfterScroll = () => {
                            window.scrollTo({top: window.pageYOffset-175, behavior:"smooth"});
                        }
                        waitScrollEnd();

                        listFormations.__x.$data.currentStage++;
                    }

                }else if(upOrDown === 'home'){
                    document.getElementById('stage0').scrollIntoView({behavior: "smooth"});

                    callbackAfterScroll = () => {
                        window.scrollTo({top: window.pageYOffset-300, behavior:"smooth"});
                    }
                    waitScrollEnd();

                    listFormations.__x.$data.currentStage = 0 ;
                }
                else{
                    //console.log(previousStage);
                    if(typeof(previousStage) != 'undefined' && previousStage != null){

                        previousStage.scrollIntoView({behavior: "smooth"});

                        callbackAfterScroll = () => {
                            window.scrollTo({top: window.pageYOffset-175, behavior:"smooth"});
                        }
                        waitScrollEnd();

                        listFormations.__x.$data.currentStage--;

                    }
                }

            }

            let timer = null

            function waitScrollEnd(){
                timer = null
                window.addEventListener( 'scroll', listenScroll,true);
            }

            function listenScroll(){
                clearTimeout(timer)
                timer = setTimeout( () => {
                    /*console.log("scroll stop")*/
                    callbackAfterScroll();
                    window.removeEventListener( 'scroll', listenScroll,true);
                    callbackAfterScroll = null
                }, 100 )
            }


        </script>
    @endpush

Here is waitScrollEnd in home.js it's exactly the same but if I don't copy it, it doesn't work :

let timer = null
function waitScrollEnd(){
    timer = null
    window.addEventListener( 'scroll', listenScroll,true);
}

function listenScroll(){
    clearTimeout(timer)
    timer = setTimeout( () => {
        /*console.log("scroll stop")*/
        callbackAfterScroll();
        window.removeEventListener( 'scroll', listenScroll,true);
        callbackAfterScroll = null
    }, 100 )
}

I checked waitScrollEnd is present in home.js and loaded and I got this error : Alpine Error: "ReferenceError: waitScrollEnd is not defined"

With first script do you mean `js/home/home.js`? If so what does it look like? How is your function `waitForScrollEnd` defined? — Reyno, Sep 30 '21 at 14:07
In the first script waitForScrollEnd is defined just like you see it but it's not normal to copy it in the second in order to make it working. — Eloise85, Sep 30 '21 at 14:08
Is the first script correctly loaded? (Check in the dev tools network tab) — Jeremy Thille, Sep 30 '21 at 14:09
You are talking about `waitForScrollEnd` but in your code i only see `waitScrollEnd` — Reyno, Sep 30 '21 at 14:10

score 0 · Answer 1 · answered Sep 30 '21 at 14:12

0

//First js
function myFunction(x) {
    var opacity = x.options[x.selectedIndex].value;
    var el = document.getElementById("p1");
    if (el.style.opacity !== undefined) {
        el.style.opacity = opacity;
    } else {
        alert("Your browser doesn't support this!");
    }
}

//Second js
function myFunction() {
    var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

answered Sep 30 '21 at 14:12

Mr. A

5
5

What should I understand ? – Eloise85 Sep 30 '21 at 14:14
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 30 '21 at 14:32

Why my second script does'nt know the function in the first script?

1 Answers1