Rotate Function doesn't work fine On sending each time or once

Question

I want to send 10 deg each time to rotate it right side or left side but it never rotate. And I want to rotate it in each browser. What am I missing?

<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
function rotate(deg){
        var degree = deg;
        document.getElementById("image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); 
}
</script>

<input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate('10')">
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

Answer 1

Use $("#image") and don't forget to include the jQuery library to your code, since the scripts you're using are based on it. See the snippet below.

Also, in order for the rotate button to work every time, I moved your degree variable declaration outside the function, so it wouldn't reset every time the function is called. Then I add the value deg to it each time the function is called, thereby increasing the angle accordingly.

 var degree = 0; function rotate(deg){ degree += deg; $("#image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script> <input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate(10)"> <img src="https://www.google.com/images/srpr/logo3w.png" id="image">