OnClick function to rotate a div element-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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  id="rectangle" onclick="rot(this)"></div>
<button onclick="rotat()">Rotate</button>

Or you can use 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  id="rectangle" onclick="rot(this)"></div>
<button onclick="rotat()">Rotate</button>