Блог

Главная - Вопросы по программированию - Почему setAttribute выдает мне неработающие изображения из массива

Почему setAttribute выдает мне неработающие изображения из массива

#javascript

#javascript

Вопрос:

Я создал игру в кости, в которую можно играть в браузере. Пользователи могут обновить страницу, чтобы получить случайный бросок кости. Выигрывает кубик с наибольшим количеством точек на нем или с наибольшим значением кубика. Случайные изображения в виде кубиков будут динамически добавлены в src двух тегов изображений, когда пользователь нажмет «Обновить». Вся логика кодирования почти работает, но, однако, изображения dices по какой-то странной причине повреждены. Я несколько дней работал над этой задачей по кодированию от Angela Yu Web Development Bootcamp на udemy. Я использую setAttribute для установки src изображения на случайное изображение из массива, но это не работает. Почему мои изображения повреждены?

dices.html

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dicee</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Indie Flower|Lobster" rel="stylesheet">

  </head>
  <body>

    <div class="container">
      <h1>Refresh Me </h1>

      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="">
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="">
      </div>

    </div>
<script src="dice.js" charset="utf-8"></script>

  </body>

  <footer>
    www 🎲 App Brewery 🎲 com
  </footer>
</html>

dice.js

 
function rollDice () {
  //two dices that will have 6 dots when game start. Same dice value
  document.querySelector(".img1").setAttribute("src", "images/dice6.png");
  document.querySelector(".img2").setAttribute("src", "images/dice6.png");

  var highestDiceRoll = 0;
  var winner;

  var player1 = ['<img src="images/dice1.png" alt="Italian Trulli">',
  '<img src="images/dice2.png" alt="Italian Trulli">',
  '<img src="images/dice3.png" alt="Italian Trulli">',
  '<img src="images/dice4.png" alt="Italian Trulli">',
  '<img src="images/dice5.png" alt="Italian Trulli">',
  '<img src="images/dice6.png" alt="Italian Trulli">'];

  var player2 = ['<img src="images/dice1.png" alt="Italian Trulli">',
  '<img src="images/dice2.png" alt="Italian Trulli">',
  '<img src="images/dice3.png" alt="Italian Trulli">',
  '<img src="images/dice4.png" alt="Italian Trulli">',
  '<img src="images/dice5.png" alt="Italian Trulli">',
  '<img src="images/dice6.png" alt="Italian Trulli">'];


var randPlayer1 = Math.floor(Math.random() * player1.length);
var randPlayer2 = Math.floor(Math.random() * player2.length);

var diceRolls = player1[randPlayer1]   " "   player2[randPlayer2];


if (performance.navigation.type == 1) {

  // when page is refreshed, update image source to a random dice image
  document.querySelector(".img1").setAttribute("src", "randPlayer2");
  document.querySelector(".img2").setAttribute("src", "randPlayer2");

  if (randPlayer1 > randPlayer2) {
     highestDiceRoll = player1;
     winner = document.querySelector("h1").innerHTML = "Player1 Won";
   } else if (randPlayer2 > randPlayer1) {
     highestDiceRoll = player2;
     winner = document.querySelector("h1").innerHTML = "Player2 Won";
   } else {
     winner = document.querySelector("h1").innerHTML = "DRAW";
   }
}

}
rollDice();

Ответ №1:

Я думаю, что это простой случай присвоения строки переменной.
Вы добавили: setAttribute("src", "randPlayer2"); когда у вас должно быть
setAttribute("src", player2[randPlayer2]);

Обновление: я сделал boo boo.

Также вам нужно будет провести рефакторинг ваших player1 amp; player2 массивов. У них есть полный html, где они должны быть только такими, например:
var player2 = ['images/dice1.png', 'images/dice2.png'];

Использование вашего кода в том виде, в каком вы его написали, с этой небольшой модификацией должно работать и не потребует полной перезаписи.

Вот полная версия без моего комментария между ними: 

 var player1 = ['images/dice1.png', 'images/dice2.png'];


var randPlayer1 = Math.floor(Math.random() * player1.length);

function rollDice () {  
  //two dices that will have 6 dots when game start. Same dice value    
 document.querySelector(".img1").setAttribute("src", player1[randPlayer1]);  
}  
 rollDice()

Ответ №2:

Измените массив изображений только на urls и установите image следующим образом

 var player2= ['images/dice1.png','images/dice2.png','images/dice3.png','images/dice4.png','images/dice5.png','images/dice6.png'];

...

document.querySelector(".img2").src = player2[randPlayer2];

то же самое с player1

Ответ №3:

  // when page is refreshed, update image source to a random dice image
  document.querySelector(".img1").setAttribute("src", randPlayer2);
  document.querySelector(".img2").setAttribute("src", randPlayer2);