why is my eventListener called multiple times

Issue

function form_anim(){

    form_2.style.transform = "translateX(0)"
    form_2.style.transition = "transform 400ms"
}
previous.addEventListener('click',()=>{

    form_2.style.transform = "translateX(900px)";
    form_2.style.transition = "transform 400ms"
    form_holder.classList.toggle('anim2');
})

//let n = 1;

submit_1.addEventListener('click',()=>{

    //n=1;

    form_holder.classList.toggle('anim');
    form_holder.addEventListener('animationend',()=>{

       
        form_2.style.transform = "translateX(0)"
        form_2.style.transition = "transform 200ms"

    })
});

I am trying to create 3 forms each has the next and previous buttons. When the next button is clicked, the first form should scale to 0, and form 2 should translate X(0px), initially set as 900px. It works the first time perfectly but when the previous is clicked the 2nd form translates to 900px but then comes back to 0px.

Solution

You should not add a new event listener every time when submit_1 button is clicked. When you click the button second time the event listener added on the first click will also run
Try using this code:

form_holder.addEventListener('animationend',()=>{
        form_2.style.transform = "translateX(0)"
        form_2.style.transition = "transform 200ms"
});

function form_anim(){
    form_2.style.transform = "translateX(0)"
    form_2.style.transition = "transform 400ms"
}
previous.addEventListener('click',()=>{

    form_2.style.transform = "translateX(900px)";
    form_2.style.transition = "transform 400ms"
    form_holder.classList.toggle('anim2');
})

//let n = 1;

submit_1.addEventListener('click',()=>{
    //n=1;
    form_holder.classList.toggle('anim');
});

Answered By - Harsh Uppal.