设置 img 元素的 .src 失败答案

【问题标题】：Setting the .src of img elements fails设置 img 元素的 .src 失败
【发布时间】：2023-03-05 07:40:01
【问题描述】：

我有一个 6x6 的 html-table。每个<td> 包含<img id="1back" src="" />，其中每个img 元素的id 被声明为"1back" 到"36back"。此外，我还有 18 个名为 "1.jpg" 到 "18.jpg" 的 .jpg 文件。每个图像必须在网格中出现两次，随机分布。

我正在尝试按如下方式完成此操作：

    function PopulateGrid() {

        for (var i = 1; i <= 18;i++) //For each image file
        {
            var randomnumber = Math.floor(Math.random() * (36 - 1 + 1)) + 1; // get random # 1-36


            while (document.getElementById(randomnumber + "back").src != "")
            {
              //if the randomly chosen <img> id is not "" genrate another random number
               randomnumber = Math.floor(Math.random() * (36 - 1 + 1)) + 1;
            }

            document.getElementById(randomnumber + "back").src = "Images/" + i + ".jpg";


            //Doing this twice as every image has to appear twice
            while (document.getElementById(randomnumber + "back").src != "") {
                randomnumber = Math.floor(Math.random() * (36 - 1 + 1)) + 1;
            }

            document.getElementById(randomnumber + "back").src = "Images/" + i + ".jpg";
        }
    }

我在 IE、Chrome 和 FireFox 中遇到了奇怪的行为。脚本在第一个 while 条件下失败。在我看来，这就像一些无休止的循环。我没有收到任何错误消息，该页面永远不会停止加载。

我想这一定像往常一样明显，但我根本看不到这里的问题。

【问题讨论】：

while (document.getElementById(randomnumber + "back").src != "") {... 我在while 循环中看不到任何将.src 设置为"" 的内容。
您可以尝试不同的方法：创建一个包含 36 个元素的数组，其中从 1 到 18 的每个数字出现两次，[ 1, 1, 2, 2, ... , 18, 18]、shuffle it，然后在一个循环中分配图像源。
嗨，我同意你可以采取另一种方法来实现它。对于这段代码，也许你可以在while循环里面放一个console.log()语句来记录生成的随机数，看看是不是随机生成的时间太长了。

标签： javascript html visual-studio-2012

【解决方案1】：

尝试使用控制台查看您的 img 的 src，当您将 src 设置为 "" 时，您很可能会获得基本 url，因此您的 != "" 永远不会是错误的。尝试像这样设置您的 img：

<img id="1back">

然后src != "" 应该验证，直到您分配一个 src。

【讨论】：