OnClick function to rotate a div element

Issue

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>

Solution

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>

Answered By – Ahmad MRF

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.