Increase transform scale by javascript onclick

Question

please help me to build following logic, here is code:

<button onclick="zoomin()">Zoom In</button>

function zoomin(){
   var myImg = document.getElementById("img");
   var i = 0;
   i++;
   myImg.style.transform = "scale(1."+ i +")";
}

but, because of i = 0 it works only one time. please tell me solution.

the problem is that every time you run the function, the var i is being set back to 0. Try moving the var i declaration outside of the function. — Matt Greenberg
– Matt Greenberg, Commented Mar 5, 2016 at 9:45

Peter Smith · Accepted Answer · 2016-03-06 16:11:57Z

5

Move the variable i out of the function, it needs to be initialised only once.

var myImg = document.getElementById("img");
    var i = 0;
    function zoomin(){


       i++;
       myImg.style.transform = "scale(1."+ i +")";
    }

edited Mar 6, 2016 at 16:11

Peter Smith

5,5529 gold badges54 silver badges80 bronze badges

answered Mar 5, 2016 at 9:44

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ganesh satpute · Accepted Answer · 2016-03-05 09:52:13Z

2

var i = 0;
var myImg = document.getElementById("img");
function zoomin(){
   i++;
   myImg.style.transform = "scale(1."+ i +")";
}

declare i=0; outside function will solve you probleem

edited Mar 5, 2016 at 9:52

answered Mar 5, 2016 at 9:45

ganesh satpute

3912 silver badges10 bronze badges

2 Comments

Matt Greenberg Over a year ago

Also the handle to myImg should be moved outside the function as well.

Matt Greenberg Over a year ago

why declare the same variable over and over and waste computational power.

Collectives™ on Stack Overflow

Increase transform scale by javascript onclick

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related