Javascript: Rotate Img On Click

I'm trying to make the img with the id image rotate using the onclick event handler to use the code in my function which grabs the image by ID assigns a variable name, then uses th

Solution 1:

You can do the rotation itself using CSS:

.rotated-image {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}

On the html:

<sectionid="middle"><imgid="image"src="images/flower.png" ><buttononclick="myFunction()">Click me</button></section>

And then, on the javascript, just add the class:

functionmyFunction() {
  var img = document.getElementById("image");
  img.setAttribute("class", "rotated-image");
}

Check out the result: http://jsbin.com/ibEmUFI/2/edit

Solution 2:

try to use div with id as a selector:

<div id='image'><imgsrc="images/flower.png" /></div>

 and 

var img = document.getElementById("image").getElementsByTagName('img');

worth a try!