Rotate image using JavaScript after click

Question

img {
  display: block;
  margin: 20px;
  width: 50px;
  height: 50px;
}

.crossRotate {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}

.crossRotate.active {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
    });
</script>
<link rel="stylesheet" href="StyleSheet.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" />
</body>
</html>

Hello, I am trying to make this image rotate 180 degrees after click. I copied almost everything from here: http://jsbin.com/bukacesari/edit?html,css,js,output , but it still doesn't work for me. Can you explain me why and how could I fix this ? This may be silly question, but I have no clue why it doesn!t work. Thanks

Ismail RBOUH · Accepted Answer · 2016-07-26 00:17:53Z

2

You need to wait for the document to be fully loaded in order to attach a click event, for that you can use one of the following methods:

1- jQuery ready event:

$(document).ready(function() {
    //DOM is fully loaded. you can safely attach events
});

Or the shortcut:

$(function() {
    //DOM is fully loaded. you can safely attach events
});

2- Put your script before the closing tag </body>:

<body>
    <!-- Your HTML Here -->
    <script>
        //The page can be manipulated safely here !
    </script>
</body>

Example of using $(function() {....}):

img {
  display: block;
  margin: 20px;
  width: 50px;
  height: 50px;
}
.crossRotate {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}
.crossRotate.active {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <link rel="stylesheet" href="StyleSheet.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    $(function() {
      $('.crossRotate').on('click', function() {
        $(this).toggleClass('active');
      });
    });
  </script>
</head>

<body>
  <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" />
</body>

</html>

edited Jul 26, 2016 at 0:17

answered Jul 26, 2016 at 0:02

Ismail RBOUH

10.5k2 gold badges26 silver badges37 bronze badges

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

5 Comments

Lukáš Jirůšek Over a year ago

So I basically have to put that script after CSS file ? Thanks for help anyway, it is working perfectly.

Josh Over a year ago

@Ismail RBOUH is correct, you must add the click function once the page is loaded so that the javascript can actually find your element that it's attaching the click handler to. In your original setup, the javascript is run before the page (and all of it's elements) are loaded, and it doesn't yet see the '.crossRotate' element, thus it cannot attach the click handler to it. The following code is an on load function that runs once the web page is loaded: $(function() { // write code here });

Ismail RBOUH Over a year ago

@LukášJirůšek Please check out the updated answer for further details.

Lukáš Jirůšek Over a year ago

@IsmailRBOUH So basically putting script at the end of body will make sure, that the page will be loaded and THEN the script will be launched, right ? Thanks for updates anyway, you saved my day.

Ismail RBOUH Over a year ago

@LukášJirůšek That's correct. Good luck and you are welcome.

Collectives™ on Stack Overflow

Rotate image using JavaScript after click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related