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:

HTML:

<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>

CSS:

#draaien {

}

jQuery:

$(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!

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:

HTML:

<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>

CSS:

#draaien {

}

jQuery:

$(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!

• javascript
• jquery
• html
• css
• rotation

• You script is pletely messed up. – user5014677 Commented Jun 21, 2017 at 14:00

3 Answers 3

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

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

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 ma.

}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/yzjk4v37/

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