I'm working on a code that counts the meters some dogs have travelled. It's just a gif constantly in loop. Now I wanted to show an image every 50 meters for like 3 seconds. That's how I have tried it:
if (i % Number.isInteger(50)) {
document.getElementById("orange").style.display = "block";
}
That's how I've tried it but it doesn't work. Can someone help me with that? Thanks!
You can use FLOOR:
let frames = Math.floor(i / 50)
That will be 0 until 1==50, then it'll be 1 until i==100.
So 1234 steps will give you 24 frames played.
Then you have to decide how many images you have, lets say 5 images:
let currentImageIndex = itterations % 5;
That'll make it it go 0,1,2,3,4,0,...
That means in our example: 24%5 = 4, display the 5th image (because 0 is the first, that makes 4 the fifth image).
document.getElementById("my-image").src = `frame${currentImageIndex}.png`;
If the person would take a few steps more, 1251 steps, divided by 50 = 25 frames, modulo 5 -> currentImageIndex==0.
Note: this is untested, but should give you something to build off of
Note: Your current solution isnt working because Number.isInteger(50) always returns true because 50 is an integer. It doesnt convert anything, it just tests of it is an integer.