Why my Javascript animation doesn't work?

December 8, 2023

I want to make a small animation to make a div(id="dice") grow in width, but I don’t know what’s going wrong. The position is already absolute. I have tried to create a button to test it (id="Pr_btn").

const pr_btn=document.getElementById("Pr_btn");
pr_btn.addEventListener("click", VtnDice);

function VtnDice(){
    let interv = null;
    const dice=document.getElementById("dice");
    let diceWidth=0;
    clearInterval(interv);
    interv=setInterval(frame, 5);

    function frame(){
        if(diceWidth<300){
            clearInterval(interv);
        }else{
            diceWidth++;
            dice.style.width= diceWidth + "px";
        }
    }
}

>Solution :

The solution is very simple ! Your condition to stop the growth is the wrong way around 🙂
Replace diceWidth<300 with diceWidth>=300 and it should work like a charm !

I did a fiddle there : https://jsfiddle.net/4ubvm1a7/1/