CODEWITHSUNDEEP
javascriptonclickrotation
user2390516
user2390516

Reputation: 17

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 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);
}

Upvotes: 1

Views: 31059

Answers (3)

aloisdg
aloisdg

Reputation: 23521

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.

Upvotes: 0

Renato Zannon
Renato Zannon

Reputation: 29941

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

Upvotes: 1

SCV
SCV

Reputation: 416

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!

Upvotes: 0

Related Questions