2

No meu código, estou tendo adicionar um eventListener para cada elemento Html da classe "animação".

Pra isso eu uso "addEventListener" ,passando a função changeBar como listener, para ser acionada em caso de click. Porém, ao carregar a página, a função changeBar já é executada, sem ter havido click. Isso não deveria estar acontecendo:

    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>

2
  • 1
    Oi Lucas, dei uma resposta que resolve o teu problema. Contudo há coisas estranhas como essa variável increase que nunca muda e o argumento 0 estático que passas à função. Imagino que seja fruto de simplificação de código para poder colocar aqui na pergunta... se não devias rever isso. Mas em relação à tua dúvida esclareci na resposta.
    – Sergio
    Commented 1/01/2020 às 21:19
  • Olá. SIm, muito obrigado. É, esse increase é uma "gambiarra". Na verdade, o que eu estava tentando fazer com ele, é tentar para o "setTimeOut" que aumenta a width das divs, quando o mouse sai de cima delas. Isso porque, uma vez clicado, as divs ficam sendo aumentadas enquanto a condição (newBegining < end && increase == true). Mas eu queria parar esse setTime out quando tiver um evento onmouseout,e eu estava usando essa increase pra saber se, que chamou a função "changeBar" foi um evento de click ou de mouseover. Eu acho que vou postar uma pergunta sobre isso, porque estou à horas trancado aí Commented 1/01/2020 às 21:35

1 Resposta 1

4

Quando estás a criar esse addEventListener estás a invocar a função, e não a passar como callback. Para passar como callback devias usar somente item.addEventListener("click", changeBar). Porém como é óbvio perdes os argumentos que lhe queres passar e que estão dentro desse let...

Tens várias opções:

  • delegar o evento e evitar o for
  • usar bind
  • declarar uma função dentro do for para ter em memória as variáveis desse bloco

Exemplos das duas ultimas opções seria:

Com .bind:

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

Declarando função:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .