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

Already asked/answered question of same author here:
https://www.sololearn.com/Discuss/237049/?ref=app ^^

Answer 2

Sorry I don't have an answer, but you might want to fix your question tags. Otherwise, people filtering by JavaScript tag won't see your question.

Answer 3

change the sign of the increment whenever h reaches the minimum or the maximum size you desire. Continously add the increment to h, when the maxSize will be reached the increment will become negative. continously adding a negative number to h will reduce its value until it equals the min size. At that point the increment becomes productive and h starts increasing agai.....and so on and so on...

var maxSize = 400;
var minSize =200;
incr=5;
h = maxSize;
function zoom(){//loops continously
if (h==maxSize || h==minSize){//on max or min size
incr = incr*(-1); //change the increment sign
}
h = h + incr; //add the increment to h

w=h;// it's a square so widthequals height
//draw the box here
}