Rotating an image with jQuery with 2 buttons

Question

I have been trying to rotate an image by 90 degrees when clicked on the right button and rotate it by -90 when click on the left button. My code is here. I'm trying to create some sort of a loop with a counter set at 0 and looping through the if and else statements. but I didn't get it to work:

<button id="left" class="button">left</button>
<img src="images/cartoon.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate">
<button id="right" class="button">right</button>

#draaien {

}

$(document).ready(function(){

 var counter = 0;
 $("#left").click(function(){
 if (counter == 0){
 $("#rotate").css({
    "-webkit-transform": "rotate(-90deg)",
    "-moz-transform": "rotate(-90deg)",
    "transform": "rotate(-90deg)"  
    teller +=1;
 });
 counter=0;

 $("#rotate").css({
 }

}else if($("#right").click()){
$("#rotate").css({
    "-webkit-transform": "rotate(90deg)",
    "-moz-transform": "rotate(90deg)",
    "transform": "rotate(90deg)"

}
});
});
});

Basically I was trying to create some kind of counter that upon clicking "left", it increments by 1 and adds the various CSS elements so it can rotate to the left, and decrementing by -1 so it can rotate to the right (+90), it doesnt seem to have any effect. Thanks!

Answer 1

If I understand, you want to set a variable to track the degree turn and add 90 if right, and subtract 90 if left.

 $(document).ready(function() { var deg = 0; $(".button").on("click", function() { if ($(this).is("#left")) { deg = deg - 90; } else { deg = deg + 90; } $("#rotate").css({ "-webkit-transform": "rotate(" + deg + "deg)", "-moz-transform": "rotate(" + deg + "deg)", transform: "rotate(" + deg + "deg)" }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="left" class="button">left</button> <img src="https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg" alt="Cartoon" style="width:304px;height:228px;" id="rotate"> <button id="right" class="button">right</button> 

Answer 2

Try this, the point is its a 360 degree rotation, so you need to know how much is currently rotated and how far it should go,

  $(document).ready(function(){ $("#left").click(function(){ rotate("#rotate",-90) }); $("#right").click(function(){ rotate("#rotate",90); }); }); function rotate(whom,angle) { var rv=$(whom).prop("data-rot")?$(whom).prop("data-rot"):0; rv=rv+1; n=rv*angle; if(Math.abs(n)>=360){n=0;rv=0;} $(whom).css({ "-webkit-transform": "rotate(" + n + "deg)", "-moz-transform": "rotate(" + n + "deg)", "transform": "rotate(" + n + "deg)" }); $(whom).prop("data-rot",rv); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="left" class="button">left</button> <img src="https://cdn.livechatinc.com/s3/default/eyeCatchers/049.png" alt="Cartoon" style="width:304px;height:228px;" id="rotate"> <button id="right" class="button">right</button> 

Answer 3

Your thought was right, setting a counter decrease when rotate left and vice versa, but there is some syntax error in the example given by you. $("#rotate").css({ "-webkit-transform": "rotate(-90deg)", "-moz-transform": "rotate(-90deg)", "transform": "rotate(-90deg)" teller +=1; });

taller += 1; was an statement, it should't appear inside of a object. Objects are key,value pairs, seperated by colon, and conjoin by comma.

}else if($("#right").click()){

$("#right").click() is a method accepted a event handler function parameter to bind click event handlers on the element, it returns the jQuery Object.

$("#rotate").css({ } and this wouldn't clear css on the element.

I wrote a simple example here: https://jsfiddle.net/yzjk4v37/

there is 2 buttons controls the block make rotate left or right