Function Listener being fired without Event having occurred, Javascript

Asked

Viewed 94 times

2

In my code, I am having add an eventListener for each HTML element of the class "animation".

For this I use "addeventlistener", passing the changeBar function as Listener, to be triggered in case of click. However, when loading the page, the changeBar function is already executed without clicking. This should not be happening:

    const initial = 10
    const end = innerWidth
    const step = 5

    function setBarAnimation(){
        let increase = true
        const elementos = document.querySelectorAll(".animacao")
        for (let item of elementos){
            increase = true
        item.addEventListener("click", changeBar(item, increase, 0)) 
       
        }
    }

    function changeBar(element, increase, timeOutId){

        const newBegining = element.offsetWidth+step
    
        if (newBegining < end && increase == true){
            element.style.width = newBegining+"px"
            timeOutId = setTimeout(() => changeBar(element, increase, timeOutId), 1000)
        } 
     
    }
    
    
    
    
    setBarAnimation()
<body>
    <div id="Barra1" class="animacao"
     style="background-color: royalblue;">
    </div>
    <div id="Barra2" class="animacao" 
    style="background-color: seagreen;">
    </div>
    <div id="Barra3" class="animacao" 
  style="background-color: red;">
    </div>

<style>
    .animacao {
        border-bottom: 10px;
        border-top: 10px;
        height: 30px;
        width: 10px;
    }

</style>
</body>

javascript html5 event-listener
  • 1

    Hi Lucas, I gave an answer that solves your problem. However there are strange things like this variable increase that never changes and the argument 0 static that you pass to the function. I imagine it is the result of code simplification to be able to put here in the question... if you should not review it. But regarding your doubt I clarified in the answer.

  • Hello. Yes, thank you very much. Yes, this Crease is a "gambiarra". In fact, what I was trying to do with it, is to try for the "setTimeOut" which increases the width of the Divs, when the mouse comes off of them. This is because, once clicked, the Divs are being increased while the condition (newBegining < end && Increase == true). But I wanted to stop this setTime out when I had an event onmouseout,and I was using this Crease to find out if, who called the "changeBar" function was a click or mouseover event. I think I’ll post a question about that, because I’ve been locked in there for hours

1 answer

4


When you’re creating that addEventListener you are calling the function, not passing as callback. To pass as callback you should only use item.addEventListener("click", changeBar). But how obvious you lose the arguments you want to pass him and that are within that let...

You have several options:

  • delegate the event and avoid the for
  • use bind
  • declare a function within the for to have in memory the variables of this block

Examples of the last two options would be:

With .bind:

item.addEventListener("click", changeBar.bind(null, item, increase, 0))

Declaring function:

for (let item of elementos){
    increase = true
    item.addEventListener("click", () => changeBar(item, increase, 0))
}

Browser other questions tagged javascript html5 event-listener

You are not signed in. Login or sign up in order to post.