'How to have an image rotated to a random degree when webpage is loaded? (JavaScript)

I’m trying to create a small project that has the user guess the degree of rotation of an image and then gives a paragraph that tells the user how many degrees the image is rotated and how many degrees they are off. I tried setting the image's rotation to a random amount between 0 and 359 using Math.random() at line 2, and then using the transform style on the image outside of any function. I was hoping by setting the rotation outside of a function that it would occur as soon as the page is loaded but that is not working (I am new to coding). How can I fix this? Here’s my JS code:

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}.`
}

HTML code:

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

CSS code:

#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;
}

I tried setting the image's rotation to a random amount between 0 and 359 using Math.random at line 2, and then using the transform style on the image outside of any function.

I tried adding the rotation in CSS using "rand(0, 359)deg" as the rotation amount and nothing changed.

javascriptrandomimage-rotation


Solution 1:[1]

Your problem is here:

image.style.transform = `rotate(${rotation.value}deg)`

perhaps .value was a typo, but it needs to be deleted:

image.style.transform = `rotate(${rotation}deg)`;

I've made a working snippet, with some extra styling to make the image container elongated and coloured so you can see the rotation. The angle is different for each reload, as you intended.

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave Pritlove

Related Questions