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>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>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>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>