В моем классе мы создавали программу, которая предоставляла бы изображения кубиков и заставляла их бросать случайные числа при нажатии кнопки обновления.Мы практиковались с использованием querySelector и setAttribute.Я подумал, что было бы хорошо, если бы я научился расширять урок, чтобы делать ножницы из бумаги, чтобы я мог лучше познакомиться с кодированием.Однако я не могу заставить свой код выполнять функции, которые будут отображать изображение бумаги, камня или ножниц, связанных с randomNumber1 или randomNumber2.Я попытался использовать bootstrap4, а затем просто javascript и не знаю, что я делаю неправильно, так как я верю, что в моем классе мы использовали почти одинаковый формат кода для случайного броска двух кубиков, но использовали только js, css и html5 без использованиясамозагрузки.
Сначала я попытался написать код, используя Bootstrap4, и все, казалось, работало правильно, пока я не добавил функцию рандомизации броска костей, нажав кнопку «Обновить».Тогда я подумал: может быть, так как я не могу заставить загрузчик работать, я должен попробовать это в обычном javascript и запустить его.Код там тоже не запускается.Я озадачен и провел целый день, пытаясь найти ответы на мою проблему.Ниже я включил первый набор кода, который я создал, используя bootstrap4, и второй набор, используя только javascript.В обеих программах образ диска, который я просто хочу, чтобы он занимал место при запуске программы, обнаруживается, так что я знаю, что между папкой изображений и программой есть контакт, но я не знаю, почему не могу получитькартинки меняются, как только я нажимаю обновить.
Первый код с использованием Bootstrap 4
<!-- css stylesheet -->
<link rel="stylesheet" href="stylesPractice2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="header">Rock, Paper, Scissors</h1>
<div class = "decision">
<h2 class = "subtopic">Need to make a decision???</h2>
</div>
<div class = "players">
<h2 class = "subtopic">Player 1</h2>
<img class = "responsive img1" src = "images/rockPaperScissors3.png">
</div>
<div class="players">
<h2 class = "subtopic">Player 2</h2>
<img class = "responsive img2" src = "images/rockPaperScissors3.png">
</div>
<div class = "whoWins">
<h2 class = "subtopic">And the winner is . . .</h2>
</div>
</div>
<script src = "rockPaperScissors.js" charset = "utf-8"></script>
</body>
JavaScript
// FIRST PLAYER CREATE RANDOM NUMBER
var randomNumber1 = (Math.floor(Math.random() * 3)) + 1;
// SECOND PLAYER CREATE RANDOM NUMBER
var randomNumber2 = Math.floor(Math.random() * 3) + 1;
function images1() {
if(randomNumber1 === 1) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber1 === 2) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors2.png");
}
else if(randomNumber1 === 3) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors3.png");
}
}
, и я остановился на этом, потому что img1 не был рандомизирован, и яне удалось найти ответ в исследовании.
2-е программирование Не использовался Bootstrap.
<link rel="stylesheet" href="stylesPractice2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Kalam:400,700" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="header">Rock, Paper, Scissors</h1>
<div class = "decision">
<h2 class = "subtopic">Need to make a decision???</h2>
</div>
<div class = "players">
<h2 class = "subtopic">Player 1</h2>
<img class = "responsive img1" src = "images/rockPaperScissors3.png">
</div>
<div class="players">
<h2 class = "subtopic">Player 2</h2>
<img class = "responsive img2" src = "images/rockPaperScissors3.png">
</div>
<div class = "whoWins">
<h2 class = "subtopic">And the winner is . . .</h2>
</div>
</div>
<script src = "rockPaperScissors.js" charset = "utf-8"></script>
</body>
Обе программы содержали тег </html>
CSS
body {
font-family: 'Kalam', cursive;
background-color: #76fc23;
color: #2357fc;
}
.container {
width: 80%;
margin: auto;
text-align: center;
}
.title {
margin-top: 4.0rem;
}
.header {
font-weight: 700;
font-size: 5rem;
line-height: 1.5;
}
h2 {
font-size: 3rem;
}
.players {
display: inline-block;
margin: 0 2rem 3rem 2rem;
}
.player1 {
text-align: center;
margin-bottom: 3rem;
/* text-align: right;
padding-right: 5%; */
}
.player2 {
text-align: center;
margin-bottom: 3rem;
/* text-align: left;
padding-left: 5%; */
}
.img {
width: 100%;
height: auto;
}
JavaScript
// FIRST PLAYER CREATE RANDOM NUMBER
var randomNumber1 = Math.random();
randomNumber1 = Math.random() * 6;
randomNumber1 = (Math.floor(Math.random() * 6)) + 1;
// SECOND PLAYER CREATE RANDOM NUMBER
var randomNumber2 = Math.random();
randomNumber2 = Math.random() * 6;
randomNumber2 = Math.floor(Math.random() * 3) + 1;
function images1() {
if(randomNumber1 === 1) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber1 === 2) {
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors2.png");
}
else{
document.querySelector(".img1").setAttribute("src", "images/rockPaperScissors3.png");
}
}
function images2() {
if(randomNumber2 === 1) {
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors1.png");
}
else if(randomNumber2 === 2) {
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors2.png");
}
else{
document.querySelector(".img2").setAttribute("src", "images/rockPaperScissors3.png");
}
}
images1();
images2();
В javascript я хочу, чтобы мои функции меняли изображения на перечисленные, если randomNumber1 или randomNumber2 равны 1, 2 или 3. Вместо этого они просто остаются на исходном изображении изHTML.Мне также нужно использовать querySelector и setAttribute в моем коде.