HTML JS在DIV中附加随机图像

HTML JS append random image in DIV

本文关键字：随机 图像 JS DIV HTML      更新时间：2023-09-26

我正在尝试制作一个助推器包打开模拟器

有了这个代码，它会显示一个随机图像

<!DOCTYPE html>
<html>
<body>
    <center>
    <input class="randombutton" type="button" value="Open Pack" onclick="randomImg1()"/>
    <script type="text/javascript">
        function randomImg1() {

            myImages1 = new Array();
            myImages1[0] = "images/TradingCard.png";
            myImages1[1] = "images/TradingCard1.png";
            var rnd = Math.floor( Math.random() * myImages1.length ); //incorporated other solution
            document.getElementById("image").innerHTML = "<img src='" + myImages1[rnd] + "' alt='image'></img>";
        }
        </script>
    <div id="image"></div>
</body>
</html>

有可能吗？当图像（卡片）生成时，它会显示出来，然后当再次按下按钮时，它就会被放入你打开的所有"卡片"的库存中，这样你就可以向其他人显示你打开的全部卡片，然后生成另一张卡片，以此类推。

感谢

您可以将图像附加到容器中，而不用用新的图像重写innerHTML。例如使用appendChild方法：

function randomImg1() {
    var myImages1 = new Array();
    myImages1[0] = "images/Myimage.png";
    myImages1[1] = "images/Myimage1.png";
    var rnd = Math.floor(Math.random() * myImages1.length);
    var img = new Image();
    img.src = myImages1[rnd];
    document.getElementById("image").appendChild(img);
}

或者使用insertAdjacentHTML方法更简单：

document.getElementById("image").insertAdjacentHTML("beforeend", "<img src='" + myImages1[rnd] + "' alt='image' />");

还要注意，在img的情况下，您不需要</img>结束标记，但在myImages1变量声明中需要var关键字。

相关文章：