http://imanas.shanghai.nyu.edu/~zc1151/commLab/jsconditional/index.html
The above link is what I made for the javaScript exercise on conditional statement. To build this animation, I first organize the HTML page, arranging the layout of the button and the three pictures. The trick is the opacity of each picture. I set the initial state to be the first picture with no transparency by setting its opacity to be 1, and the other two with high transparency by setting their opacity to be 0.1. I then established two functions in the javaScript document, one is for changing opacity from 0.1 to 1 (called “incOpt()”), the other is to change from 1 to 0.1 (called “decOpt()”). To make the code cleaner, I made these two functions to accept an Id parameter, so I can call them multiple times in my later codes without rewriting the functions. I then set up a variable called stated to keep track of the current state of the image, and set its initial value to be 0, indicating that now it’s the first image with the opacity of 1. Each time the button is clicked, another function called “changeOpc()” is called, which include several conditional judgements. If the state is 0, it calls the function “decOpt()” and pass the Id “walking0” to it, then it calls “incOpt()” and pass the Id “walking1” to it. After these two statement, it adds one to the state so that the current position is updated to the second image. The same is done for other states. To make it a loop, when the state reach 2, I set the state back to 0 instead of adding 1 to it.