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.

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.

• javascript

• 2 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 Commented Mar 5, 2016 at 9:45

2 Answers 2

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 +")";
    }

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