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 use
You can do the rotation itself using CSS:
.rotated-image {
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
On the html:
<section id="middle">
<img id="image" src="images/flower.png" >
<button onclick="myFunction()">Click me</button>
</section>
And then, on the javascript, just add the class:
function myFunction() {
var img = document.getElementById("image");
img.setAttribute("class", "rotated-image");
}
Check out the result: http://jsbin.com/ibEmUFI/2/edit
try to use div with id as a selector:
<div id='image'><img src="images/flower.png" /></div>
and
var img = document.getElementById("image").getElementsByTagName('img');
worth a try!