Hice un programa para rotar un cuadrado hecho con la etiqueta h1 con solo hacer clic en un botón. Pero no está funcionando. ¿Alguien podría echar un vistazo a este código y decir qué está mal aquí?
// storing a button which has the id rotate1 in a variable let button = document.querySelector("#rotate1"); // storing the square which has an id 'square' in a variable let square = document.querySelector("#square"); let degree = 0; // calling a function rotate on every 10 milliseconds let a = setInterval(rotate , 10); // defing rotate function function rotate(){ button.onclick = ()=>{ //stop calling when the variable degree is greater than or equal to 360deg. I am doing this for stopping the square from rotating when it has comnpleted a rotation. if(degree>=360){ clearInterval(a); } // else incrementing degree and rotating the square. else{ degree++; rotate1.style.transform = "rotateX("+degree+"deg)" } } }cuando hago clic en el botón, el cuadrado no gira. ¿Por qué no gira? Hice mi mejor esfuerzo para explicar la pregunta. ¿Alguien podría decirme qué está mal aquí y cómo solucionarlo?
html:
<!DOCTYPE html> <html lang="en"> <head> <link rel = "stylesheet" href = "practise.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="square"></h1> <button id="rotate1">Rotate</button> <script src="practise.js"></script> </body> </html>actualmente rotas el botón #rotate1 no h1 , luego rotas el elemento basado en clic no setInterval, pero puedes escribirlo como se muestra a continuación
// storing a button which has the id rotate1 in a variable let button = document.querySelector("#rotate1"); // storing the square which has an id 'square' in a variable let square = document.querySelector("#square"); let degree, interval; // defing rotate function function rotate() { //stop calling when the variable degree is greater than or equal to 360deg. I am doing this for stopping the square from rotating when it has comnpleted a rotation. if (degree >= 360) { clearInterval(interval); } // else incrementing degree and rotating the square. else { degree++; square.style.transform = "rotateX(" + degree + "deg)" } } button.onclick = () => { degree = 0; interval = setInterval(rotate, 10); } h1{display: block;width: 100px;height: 100px;background: red;} <h1 id="square"></h1> <button id="rotate1">Rotate</button>Antes que yo, pero aquí está mi solución...
// storing a button which has the id rotate1 in a variable let button = document.getElementById("rotate1"); // storing the square which has an id 'square' in a variable let square = document.getElementById("square"); let degree = 0; button.onclick = function(event) { degree += 360; square.style.transform = "rotate("+degree+"deg)"; } #square { height:50px; width:50px; background-color:red; transition:0.4s ease all; } <!DOCTYPE html> <html lang="en"> <head> <link rel = "stylesheet" href = "practise.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="rotate1">Rotate</button> <div id="square"></div> <script src="practise.js"></script> </body> </html>