CODEWITHSUNDEEP
javascripthtmlcss
Gautham
Gautham

Reputation: 109

OnClick function to rotate a div element

I am new to Javascript. I am writing a code where I am trying to rotate a square with every click. I was able to do it by clicking the square div element itself. But I wanna rotate the element using the button only. I am stuck with this. Where am I going wrong?

var count=0;

            function rot(e){
            count++;
            var deg = count * 30;
            e.style.transform = "rotate("+deg+"deg)";}

            function rotat(){
                count++;
                var deg = count * 30;
                this.style.transform = "rotate("+deg+"deg)";
            }
.rectangle{
                position: relative;
                margin: 60mm;
                width:90mm;
                height:90mm;
                border:5px solid #24ddff;
            }
<div class = "rectangle" onclick="rot(this)"></div>
        <button onclick="rotat()">Rotate</button>

        <p id="demo"></p>

Upvotes: 0

Views: 1152

Answers (3)

IVANOFF
IVANOFF

Reputation: 578

For some reasons "transform" did not work properly. Try to use ".webkitTransform" instead ".transform".

Tip 2: Also try to bind the element by ID, not with Event.

Here some example:

<script type="text/javascript">
    var rotatingDiv = document.getElementById("rotatingDiv");
    rotatingDiv.style.webkitTransform  = "rotate(-1.6deg)";

    function transform()
    {
        var x=document.getElementById("element1");
        rotatingDiv.style.webkitTransform  = "rotate("+x.value+"deg)";
    }
</script>

Upvotes: 0

Nick Vu
Nick Vu

Reputation: 15520

You should add id attribute to rectangle element that help you to recognize it within Javascript by getElementById

var count = 0;

function rot(e) {
  count++;
  var deg = count * 30;
  e.style.transform = "rotate(" + deg + "deg)";
}

function rotat() {
  const rectangle = document.getElementById("rectangle") //find rectangle element by id
  count++;
  var deg = count * 30;
  rectangle.style.transform = "rotate(" + deg + "deg)";
}
.rectangle {
  position: relative;
  margin: 60mm;
  width: 90mm;
  height: 90mm;
  border: 5px solid #24ddff;
}
<div class="rectangle" id="rectangle" onclick="rot(this)"></div>
<button onclick="rotat()">Rotate</button>

Or you can use class="rectangle" and find it by querySelector, but this way is not 100% safe because you may have multiple elements having rectangle class

var count = 0;

function rot(e) {
  count++;
  var deg = count * 30;
  e.style.transform = "rotate(" + deg + "deg)";
}

function rotat() {
  const rectangle = document.querySelector(".rectangle") //find rectangle element by id
  count++;
  var deg = count * 30;
  rectangle.style.transform = "rotate(" + deg + "deg)";
}
.rectangle {
  position: relative;
  margin: 60mm;
  width: 90mm;
  height: 90mm;
  border: 5px solid #24ddff;
}
<div class="rectangle" id="rectangle" onclick="rot(this)"></div>
<button onclick="rotat()">Rotate</button>

Upvotes: 1

Ahmad MRF
Ahmad MRF

Reputation: 1384

select div element . and use it in rotate function

var count=0;
const div = document.querySelector('div')

            function rotat(){
                count++;
                var deg = count * 30;
                div.style.transform = "rotate("+deg+"deg)";
            }
.rectangle{
                position: relative;
                margin: 60px;
                width:90px;
                height:90px;
                border:5px solid #24ddff;
            }
<button onclick="rotat()">Rotate</button>
<div class = "rectangle"></div>

Upvotes: 1

Related Questions