I've been delving into the world of JavaScript for a few days now, but I've hit a roadblock when it comes to implementing a while loop/switch statement in this animation project.
The idea behind the program is that the image will "level up" and change color after moving 3 times, resetting back to the beginning. I have successfully implemented a gold level up, but I'm looking to add more colors for subsequent level ups. I've been attempting to assign different classes to the animated image based on the counter, but nothing seems to be working. Here's what my code looks like:
$("#go").click(function() {
var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
if (dest < 400) {
$("#block").animate({
marginLeft: dest + "px"
}, 700);
} else {
$("#block").animate({
marginLeft: "10px"
}, 100);
//if counter = 1
document.getElementById('block').classList.add("gold")
//if counter = 2
//document.getElementById('block').classList.remove("gold")
//document.getElementById('block').classList.add("pink")
//... etc
//counter += 1
}
});
Feel free to click on the link below to see the program in action: http://jsfiddle.net/mept9g1u/
I would greatly appreciate any help or guidance on this matter!