无法使用 Javascript 为随机图像生成器代码放置图像答案

【问题标题】：Unable to place an image using Javascript for a random image generator code无法使用 Javascript 为随机图像生成器代码放置图像
【发布时间】：2022-07-18 20:06:31
【问题描述】：

[将痣的图像随机放置在创建的方块中][1
** 我正在尝试编写名为“Whack-a-mole”的游戏。我使用 javascript 创建了要放置在屏幕上的 h1 和 div 元素。然后我想在正方形内放置一个图像以随机出现，但它不会出现在正方形中。你能帮我解决我哪里出错了吗？谢谢你

。我加

const h1 = document.createElement('h1');
h1.textContent = 'Your Score: ';
h1.id = 'score';
document.body.append(h1);

const time = document.createElement('h1');
time.textContent = 'Time Left: ';
time.id = 'time';
document.body.append(time);

const grid = document.createElement('div');
grid.className = 'grid';
document.body.append(grid);

for (let i = 0; i < 8; i++) {
    let square = document.createElement('img');
    square.className = 'square';
    square.id = ('data-id', i+1);
    grid.append(square);
};

const result = document.querySelector('#score');
const left = document.querySelector('#time');
const boxes = document.querySelectorAll('.square');
const images = document.querySelector('.mole');

function randomMole() {
    boxes.forEach(box => {
        box.classList.remove('images');
    });

    let randomSquare = boxes[Math.floor(Math.random() * 8)];
    randomSquare.classList.add('images');
};
randomMole();

 .grid {
    width: 600px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
  }
  .square {
    width: 135px;
    height: 135px;
    border: solid rgb(11, 8, 8) 1px;
  }
  .mole {
    background-image: url('images/mole.jpg');
    background-size: cover;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <!-- <h2>Your score:</h2>
    <h2 id="score">0</h2>
  
    <h2>Time Left:</h2>
    <h2 id="time-left">60</h2>
 
    <div class="grid">
      <div class="square" id="1"></div>
      <div class="square" id="2"></div>
      <div class="square" id="3"></div>
      <div class="square" id="4"></div>
      <div class="square" id="5"></div>
      <div class="square" id="6"></div>
      <div class="square" id="7"></div>
      <div class="square" id="8"></div>
      <div class="square" id="9"></div>
    </div> -->
      
    <script src="Ania JS/Ania game 3.js"></script>
  </body>
</html>

【问题讨论】：

标签： javascript image

【解决方案1】：

我想您需要 .mole 类来显示图像。这是您的代码的minimal reproducable example。

document.addEventListener(`click`, evt => evt.target.id === `redo` && randomMole());

const grid = document.body.insertAdjacentHTML(
  `beforeend`, `<div class="grid">${
    [...Array(8)].map((_, i) => `<img class="square" data-id=${i}>`).join(``) }</img>`);

randomMole();

function randomMole() {
    const mole = document.querySelector(`.mole`);
    mole && mole.classList.remove('mole');
    document.querySelectorAll('.square')[Math.floor(Math.random() * 8)]
      .classList.add(`mole`);
};

.grid {
    width: 600px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
}
.square {
  width: 64px;
  height: 64px;
  border: solid rgb(11, 8, 8) 1px;
  margin-right: 2px;
}
.mole {
  background-image: url('//cdn.pixabay.com/photo/2012/05/02/17/24/ground-45742_960_720.png');
  background-size: cover;
}

&lt;p&gt;&lt;button id="redo"&gt;random mole position&lt;/button&gt;&lt;/p&gt;

【讨论】：