如何在加载页面时显示随机图片？

Question

好的，首先。我是 HTML、CSS 和 JS 的初学者，所以我知道这可能有点太雄心勃勃了，不要恨我好吗？我只是有想法并寻找针对特定事物的教程，而不是像普通人一样从头开始学习代码。 对于这个具体的事情，我查看了几个教程（w3schools、htmlcheatsheet、htmldog 等）以及 stackoverflow 上的几个问题。我已经阅读了所有这些内容，并尝试了不同的方法来处理同一件事，但没有任何效果……此时我很绝望，所以我决定创建自己的帐户，这样我就可以为自己提出要求。 为了了解更多背景信息，我是一个小社区的管理员，想为复活节做一项有趣的活动，所以我创建了一个页面来进行一些寻找彩蛋的活动。这对游戏来说并不重要，但我想为“未找到”页面提供 4 张图像，并让玩家看到 4 张中的随机一张。如果我做不到，那也不是世界末日但现在我只是很生气，因为我做不好，我决心学习做这件事，以防我将来再次想做这样的事情。

这是我现在的 JS 代码（不确定这是否相关，但这些不是文件的实际名称，我只是对其进行审查，以防我的社区中的某人看到这一点，极不可能，但并非不可能）：

<script>

window.onload = displayImage()

var images = new Array(
  "image1.png", 
  "image2.png", 
  "image3.png", 
  "image4.png");

function displayImage(){
var num = Math.floor(Math.random() * images.length);
document.getElementById("myPicture").src = images[num];

</script> 

对吗？我的 HTML 看起来像这样：

<div class="centered"><img src="idk.png" id="myPicture" style="width:500px"/></div>

我尝试将 JS 放在 div 之前、div 之后、头部内部，所有内容。我认为问题的原因可能是 src="idk.png" 因为它只显示占位符（它只是一个透明的 png），并且不显示数组中的图片，但我真的不知道还有什么可做的。再次，抱歉，如果这太愚蠢了，而且是一个初学者级别的错误……如果您花时间阅读所有这些，谢谢您！

Answer 1

首先，我认为你忘记了

displayImage()

函数末尾的大括号。

对于您的问题，您应该在

window.onload

之前添加

function displayImage()

，如下所示：

<script>
var images = new Array(
    "image1.png", 
    "image2.png", 
    "image3.png", 
    "image4.png");

    window.onload = function displayImage(){
    var num = Math.floor(Math.random() * images.length);
    document.getElementById("myPicture").src = images[num];

</script>