JavaScript: Rotate img on click

Question

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 the variable name to rotate. I'm not really sure where i when wrong in my code.

   <section id="middle">
    <img id="image" src="images/flower.png" >   
    <button onclick="myFunction()">Click me</button>
    </section>

MyFunction(){
var img = document.getElementById("image");
img.rotate(20*Math.PI/180);
}

For one thing, you have onclick="myFunction()" and MyFunction(){. Case matters. You probably just want onclick=MyFunction. — Scott Mermelstein
– Scott Mermelstein, Commented Nov 5, 2013 at 22:00
One of the errors was not having the key word function in front of the MyFunction. — user2390516
– user2390516, Commented Nov 5, 2013 at 22:17

Renato Zannon · Accepted Answer · 2013-11-05 22:37:53Z

1

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

edited Nov 5, 2013 at 22:37

answered Nov 5, 2013 at 22:07

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

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

1 Comment

user2390516 Over a year ago

Thank you I'm playing with this code now. trying to get the img with the ID image to rotate instead of the button it self.

SCV · Accepted Answer · 2013-11-05 22:07:51Z

0

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!

answered Nov 5, 2013 at 22:07

SCV

4162 silver badges14 bronze badges

Comments

aloisdg · Accepted Answer · 2022-07-14 15:29:49Z

We can use rotate to, well, rotate.

The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.

MDN

const rotate = () => {
  document.querySelector("p").classList.add("rotate160deg");
}

.rotate160deg {
  rotate: 160deg;
}

// demo related stuff:
div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.rotate {
  transition: rotate 1s;
}

You can do the rotation itself using CSS:
<button onclick="rotate()">rotate</button>

<div>
  <p class="rotate">😀</p>
</div>

And we use classList to add a class to the list of class.

Collectives™ on Stack Overflow

JavaScript: Rotate img on click

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related