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

define an increment and change its sign (multiplying it by -1) every time the height equals the maximum or the minimum size.
add the increment to height all the time.
I left you an example in your future post.
GREAT SCOTT!!!!

Answer 2

just write a new function named shrink, and call it just after clearInterval.
function shrink will contain
h-=5;
w-=5;

Answer 3

but in many code , the "t(setInterval)" is a loop which help my function zoom repeat every 100milisecs,if I use clearInterval then use function shrink , h and w only decrease 5 for 1 time because the loop has just been canceled

Answer 4

but in my code , the "t(setInterval)" is a loop which help my function zoom repeat every 100milisecs,if I use clearInterval then use function shrink , h and w only decrease 5 for 1 time because the loop has just been canceled