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>
increase
que nunca muda e o argumento0
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.