How to create image animation in javascript

I am trying to create an image animation which starts by clicking on Start Animation button and should alternate with another picture every half a second until I click on Stop Animation button. When I run this code, it does not output anything. what is wrong with the following code ?

Start Animation

Stop Animation

My coding:

<button onClick="StartAnimation()">
Start Animation
</button>

<button onClick="StopAnimation()">
Stop Animation
</button>

<script>
var counter;
var Schedule;
function StartAnimation()
var images = document.getElementById("fish");
images.src="https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";


Schedule = setInterval(animationfunction,5000);


function animationfunction()
var fish_img = document.getElementById("fish");
fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";

function StopAnimation()
clearInterval(Schedule);



2 Answers
2

You've misnamed your function function StarAnimation(){ should be function StartAnimation(){

function StarAnimation(){

function StartAnimation(){

Try to add this function.
Your code looks like, you only want to change your image once. Try to add loop or you can complete in one if-else statement like this.

if-else

function animationfunction()

if(image == "happy")
image = "sad";
fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/sad_fish.png";
else
image="happy";
fish_img.src = "https://www.uow.edu.au/~dong/w3/assignment/a5/happy_fish.png";


function StopAnimation()
clearInterval(Schedule);



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy