Estoy tratando de crear un pequeño proyecto que haga que el usuario adivine el grado de rotación de una imagen y luego proporcione un párrafo que le diga al usuario cuántos grados gira la imagen y cuántos grados están fuera. Intenté configurar la rotación de la imagen en una cantidad aleatoria entre 0 y 359 usando Math.random() en la línea 2 y luego usando el estilo de transformación en la imagen fuera de cualquier función. Tenía la esperanza de establecer la rotación fuera de una función que ocurriría tan pronto como se cargue la página, pero eso no funciona (soy nuevo en la codificación). ¿Cómo puedo arreglar esto? Aquí está mi código JS:
let image = document.getElementById(`image`) let rotation = Math.floor(Math.random() * 359) let degrees = document.getElementById(`degrees`) let submitButton = document.getElementById(`submitButton`) let difference let rotationParagraph = document.getElementById(`rotationParagraph`) image.style.transform = `rotate(${rotation.value}deg)` submitButton.addEventListener(`click`, guessRotation) function guessRotation() { difference = `Math.abs(${rotation.value} - ${degrees.value})` rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.` }Código HTML:
<!DOCTYPE html> <html> <head> <title>Guess the Rotation</title> <link href="style.css" rel="stylesheet"> <script src="script.js" defer> </script> </head> <body> <h1>Guess the Rotation</h1> <!-- image that will be rotated --> <div id="object"> <image src="connection.jpg" width="200" style="transform: rotate" id="image"> </div> <!-- side panel --> <div id="sidePanel"> <p id="">How many degrees is the image rotated?</p> <input type="number" min="0" max="359" placeholder="0-359" id="degrees"> <button id="submitButton">Submit</button> <p id="rotationParagraph"></p> </div> </body> </html>Código CSS:
#object, #sidePanel { /* puts the image and side panel side by side */ display: inline-block; /* makes the image and side panel aligned at the top */ vertical-align: top; } #image { /* gives dimensions and a border to the image */ border: 1px solid black; /* puts empty space to the right of the box to separate it from the side panel */ margin-right: 30px; margin-bottom: 30px; margin-top: 30px; }Intenté establecer la rotación de la imagen en una cantidad aleatoria entre 0 y 359 usando Math.random en la línea 2 y luego usando el estilo de transformación en la imagen fuera de cualquier función.
Intenté agregar la rotación en CSS usando "rand (0, 359) grados" como la cantidad de rotación y nada cambió.
Tu problema está aquí:
image.style.transform = `rotate(${rotation.value}deg)` quizás .value fue un error tipográfico, pero debe eliminarse:
image.style.transform = `rotate(${rotation}deg)`;Hice un fragmento de trabajo, con un poco de estilo adicional para hacer que el contenedor de la imagen se alargara y coloreara para que pueda ver la rotación. El ángulo es diferente para cada recarga, como pretendías.
let image = document.getElementById(`image`) //let rotation = 90; let rotation = Math.floor(Math.random() * 359) let degrees = document.getElementById(`degrees`) let submitButton = document.getElementById(`submitButton`) let difference let rotationParagraph = document.getElementById(`rotationParagraph`) image.style.transform = `rotate(${rotation}deg)`; submitButton.addEventListener(`click`, guessRotation) function guessRotation() { difference = `Math.abs(${rotation.value} - ${degrees.value})` rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.` } #object, #sidePanel { /* puts the image and side panel side by side */ display: inline-block; /* makes the image and side panel aligned at the top */ vertical-align: top; } #image { /* gives dimensions and a border to the image */ border: 1px solid black; aspect-ratio: 0.5; background: yellow; /* puts empty space to the right of the box to separate it from the side panel */ margin-right: 30px; margin-bottom: 30px; margin-top: 30px; } <h1>Guess the Rotation</h1> <!-- image that will be rotated --> <div id="object"> <image src="connection.jpg" width="50" id="image"> </div> <!-- side panel --> <div id="sidePanel"> <p id="">How many degrees is the image rotated?</p> <input type="number" min="0" max="359" placeholder="0-359" id="degrees"> <button id="submitButton">Submit</button> <p id="rotationParagraph"></p> </div>