javascript - 在 html img src 代码中调用 JavaScript 函数(随机图像生成器)

Question

我在网上搜索过所有旧的 Stack Overflow 帖子。我一直在尝试一种建议的方法，您可以在其中使用带有空 src=""地址的 html 标记:

<img id = "imageid" src="">

然后是对应的Javascript代码:

  function randomImg(){
var randomNumber = Math.floor(Math.random() * 12) + 1;
var imgName = "img_" + randomNumber + ".jpg";
document.getElementById("imageid").src= YOUR_IMG_PATH + "/" + imgName ;
}

因此，我有 12 张图片，所有图片都命名为 img_1.jpg 到 img_12.jpg，是的，我已经检查了它们的 director 并让它们通过我网站上的这个功能加载，奇怪的是，仅通过将此代码用于按钮。我没有只是通过标准的 html img 标签加载图像就成功了:

<button type="button" onclick="randomImg()">Try it</button>

我看过其他推荐使用 document.onload = function() 的旧帖子，但这对我不起作用(我还发现了一篇帖子，其中 Stack Overflow 用户声明 document.onload 将 NOT 为空的 src="" 标签生成一个 img src 地址)。我一直尝试以不同的方式设置格式，即对代码的某些部分使用 '' 而不是 ""。

我最后的努力是使用数组，但我想看看我是否可以按照现在的方式解决这个问题，因为我觉得我缺少一些完全基本和明显的东西。

网址是http://aemaeth0.github.io

Answer 1

好的，谢谢你们，我使用了@Chris G 提供的代码更改。本质上是他通过函数传递“id”并使用 window.onload。这是确切的代码:

<img id="img1" src="">
    <script>
    function randomImg(id) {
    var randomNumber = Math.floor(Math.random() * 12) + 1;
    var imgName = "img_" + randomNumber + ".jpg";
    document.getElementById(id).src= imgName;
    }
    window.onload = function() {
  randomImg("img1");
    }
    </script>

我用 Java、C++ 和 MATLAB 编写过代码，并在 Uni 上过数据结构/面向对象编程，但没有学过很多 Javascript 和小语法原则(例如“id”在函数中将 id 作为参数传递)让我失望了。

我希望这对任何试图通过 javascript 在他们的网站上随机生成图像的人有所帮助，特别是如果他们不想使用数组。

再次感谢所有的帮助!