Soy nuevo en Javascript. Estoy escribiendo un código en el que intento rotar un cuadrado con cada clic. Pude hacerlo haciendo clic en el elemento div cuadrado. Pero quiero rotar el elemento usando solo el botón. Estoy atascado con esto. ¿Dónde me estoy equivocando?
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>seleccione el elemento div . y usarlo en la función de rotate
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>Debe agregar el atributo id al elemento del rectángulo que lo ayude a reconocerlo dentro de Javascript porgetElementById
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> O puede usar class="rectangle" y encontrarlo mediante querySelector , pero de esta manera no es 100% seguro porque puede tener varios elementos con clase de rectangle
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>Por alguna razón, "transformar" no funcionó correctamente. Intente usar ".webkitTransform" en lugar de ".transform".
Sugerencia 2: también intente vincular el elemento por ID, no con Event.
Aquí algún ejemplo:
<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>