Как повернуть изображение в случайном порядке при загрузке веб-страницы? (JavaScript)
Я пытаюсь создать небольшой проект, в котором пользователь угадывает угол поворота изображения, а затем дает абзац, который сообщает пользователю, на сколько градусов изображение повернуто и на сколько градусов они выключены. Я попытался установить вращение изображения на случайную величину от 0 до 359, используя Math.random() в строке 2, а затем используя стиль преобразования изображения вне какой-либо функции. Я надеялся, установив вращение вне функции, что это произойдет, как только страница будет загружена, но это не работает (я новичок в кодировании). Как я могу это исправить? Вот мой 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}.`
}
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>
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;
}
Я попытался установить вращение изображения на случайную величину от 0 до 359, используя Math.random в строке 2, а затем используя стиль преобразования изображения вне какой-либо функции.
Я попытался добавить вращение в CSS, используя «rand (0, 359) deg» в качестве величины вращения, и ничего не изменилось.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша проблема здесь:
image.style.transform = `rotate(${rotation.value}deg)`
возможно .value была опечатка, но ее нужно удалить:
image.style.transform = `rotate(${rotation}deg)`;
Я сделал рабочий фрагмент с некоторыми дополнительными стилями, чтобы сделать контейнер изображения удлиненным и окрашенным, чтобы вы могли видеть вращение. Угол разный для каждой перезагрузки, как вы и предполагали.
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>Да, вы бы использовали .value для извлечения значения из объекта ввода пользователя. Таким образом, чтобы прочитать значение вашего пользовательского поля input, вы делаете ссылку на поле объект : const userInput=document.getElementById('degrees'); и извлекаете его значение с помощью .value следующим образом: let userValue=userInput.value'. Это также может быть достигнуто за один шаг, используя: let userValue=document.getElementById('degrees').value, но стоит знать, что ярлык по-прежнему делает (временную) ссылку сначала на объект html, а затем на значение, хранящееся в нем.
Спасибо @dave. Использовать ли .value только для переменных, которые вводит пользователь?