I want the red box to be enlarged and then shrinked ,but the code underneath just makes it enlarge , please help me !!!!!

Question

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
/* h and w are counters of height and width , and i set them all 0*/
var h = 0;
var w = 0;
var box = document.getElementById('box');
/* i'm trying to repeat function zoom every 10 milisecs */
var t = setInterval(zoom, 10);

function zoom() {
/* if h >=200 and w >= 200 , the function zoom will be stopped */
if(h >= 200 && w >=200) {
clearInterval(t);
}
else {
/* else height and width will increase and the output makes you fell like it is enlarging */
h += 5 ;
w += 5 ;
box.style.height = h;
box.style.width = w;
}

}
};
/* The code above only makes the red box enlarge , you know */
/* SO THE POINT IS HOW TO MAKE THE RED BOX SHRINK WHENEVER h =200 and w =200 */

Answer 1

Write a function unzoom(), as same way you write zoom(), and run a setInterval() with it, just after your clearInterval() call: doing as well in the function unzoom ( setting interval for zoom() after clearing interval of unzoom() ) will make your box enlarge/shrink infinitly ^^

But that's stuff you could easily do only with Css ;)

Answer 2

its because you used id. id is unique and can be used only once. give it a class name and get the element by class name