随机图像会随着每次刷新而改变

Question

因此，我从文件夹中链接了两个HTML图像：images/但是在javascript中，我试图让骰子在每次刷新后随机更改这些图像。我不知道为什么它不起作用

下面是HTML代码

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

  <div class="dice">
    <p>Player 1</p>
    <img class="img1" src="images/dice6.png">
  </div>

  <div class="dice">
    <p>Player 2</p>
    <img class="img2" src="images/dice6.png">
  </div>

    </div>

下面是js代码

imgArray = [
"dice1.png",
"dice2.png",
"dice3.png",
"dice4.png",
"dice5.png",
"dice6.png"
]


function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementByClassName("img1").src = "./images/${selectedImages}"

}

注意：我是一个新的学习者，仍在努力理解javascript。谢谢你谦虚的回答和帮助。如果解释得简单一点，我就可以理解了。

修复上面的代码后

function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementsByClassName("img1")[0].src = './images/${selectedImages}'
}

window.onload = images;

我在刷新页面时遇到问题这就是它显示的内容

在此处输入图像描述

Answer 1

这里有几个问题：

>

将双引号替换为单引号：'Image/'selectedImages

当窗口加载时，不要忘记调用该函数。

最终代码：

function images(){
  // the random images
  var randomNumber1 = Math.floor(Math.random() * imgArray.length);
  // get images at randomNumber1
  selectedImages = imgArray[randomNumber1]
  // display the images()
  document.getElementsByClassName("img1")[0].src = 'images/' + selectedImages;
}

window.onload = images;