mouse over and mouse out happening at same time

February 15, 2022

I’m trying to make a home button for my website and using "onmouseover" to change what the button says and I want it to go back to what it said before when the user isn’t hovering over the button anymore.

currently I have this:

<a href="index.html"><button id="b1" class="b1" onmouseover="hover(this)" onmouseout="unHover(this)">{WELCOME}</button></a>

and in a separate file I have the JS:

function hover(element){

    if(element.alreadyHovered == null) {
        element.alreadyHovered = true;
        console.log("hover");

        let hover = document.querySelector('#b1');
        let anim = [
            { t: "{ }", ms: 200},
            { t: "{K_}", ms: 200 },
            { t: "{KB_}", ms: 200 },
            { t: "{KBO_}", ms: 200 },
            { t: "{KBOA_}", ms: 400 },
            { t: "{KBOAN}", ms: 400 },
        ];
        let stepDenominator = 1;
        if (window.localStorage.stepDenominator)
            stepDenominator = window.localStorage.stepDenominator;
        let i = 0;
        let update = () => {
            let step = anim[i];
            hover.innerText = step.t;
            i++;

            if (i < anim.length)
                setTimeout(update, step.ms / stepDenominator);
            else {
                window.localStorage.stepDenominator = 2;
            }
        }
        update();
    }
}
function unHover(element){
    element.alreadyHovered = null
    console.log("unhover")

    let hover = document.querySelector('#b1');
    let anim = [
        { t: "{W_}", ms: 200 },
        { t: "{WE_}", ms: 200 },
        { t: "{WEL_}", ms: 200 },
        { t: "{WELC_}", ms: 200 },
        { t: "{WELCO_}", ms: 200 },
        { t: "{WELCOM_}", ms: 400 },
        { t: "{WELCOME}", ms: 400 },
    ];
    let stepDenominator = 1;
    if (window.localStorage.stepDenominator)
        stepDenominator = window.localStorage.stepDenominator;
    let i = 0;
    let update = () => {
        let step = anim[i];
        hover.innerText = step.t;
        i++;

        if (i < anim.length)
            setTimeout(update, step.ms / stepDenominator);
        else {
            window.localStorage.stepDenominator = 2;
        }
    }
    update();

}

when I use this both functions run at the same time and it doesn’t do what I want, please help.