Javascript: how to increase and decrease image after clicking on it

Question

1.00/5 (1 vote)

See more:

I have image Width=200, Height=200. I need after every click on image, that image increase with 50px, and when it will become 500px, it must decrease with 50px, and when it will become 200px, again it must increase with 50px and so on.
How can i do it?

What I have tried:

I have tried like this but it's wrong.

JavaScript

function Increase_Decrease() {
    var w = document.getElementById("img").width;
    var h = document.getElementById("img").height;
    if (w <= 500 && h <= 500) {
        var w = document.getElementById("img").width += 50;
        var h = document.getElementById("img").height += 50;
    } else {
        var w = document.getElementById("img").width -= 50;
        var h = document.getElementById("img").height -= 50;
    }
}

Posted 3-Jul-18 21:02pm

Suren97

Updated 3-Jul-18 22:37pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohibur Rashid · Answer 1 · 2018-07-03T22:35:00

an improved version

JavaScript

<pre>var increasing=1;
var min_width=200;
var change=50;
var max_lenght=500;
function Increase_Decrease() {

	document.getElementById("img").width += change*increasing;
	document.getElementById("img").height += change*increasing;
	if(document.getElementById("img").width >= max_lenght) {
		increasing=-1;
	} else if(document.getElementById("img").width <= min_width) {
		increasing=1;
	}
}

jsc42 · Answer 2 · 2018-07-03T22:37:00

What your code will do is resize 200 -> 250 -> 300 -> 350 -> 400 -> 450 -> 500 -> 450 as intended, but after that, the size is less than 500, so it will increase again. It will oscillate 500 -> 450 -> 500 -> 450 -> 500 -> 450, etc.
You need to remember whether you are in a going up or a going down phase. The simplest way (other folks may disagree) is to add an attribute to the image tag. e.g.

function Increase_Decrease() {
    var img = document.getElementById("img");
    var w = img.width;
    var h = img.height;

    if (w <= 200 && h <= 200) {
       img.changeSize = 50;   // At bottom of range. So must now go up
    } else if (w >= 500 && h >= 500) {
       img.changeSize = -50;    // At top of range. So must now go down again
    }

    img.width += 1 * img.changeSize;   // Attributes are strings. Multiply by 1 is one of several ways to quickly convert it to a number
    img.height += 1 * img.changeSize;
}

This is all from the top of my head. It is totally untested.

Javascript: how to increase and decrease image after clicking on it

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0