javascript - 设置img元素的.src失败

Question

我有一个 6x6 html- table 。每个<td>持有<img id="1back" src="" />其中id每个img -element 声明为 "1back"至"36back" 。此外，我有 18 个名为 "1.jpg" 的 .jpg 文件至"18.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 条件下失败。在我看来，这就像某种无限循环。我没有收到任何错误消息，页面永远不会停止加载。

我想这一定是像往常一样显而易见的事情，但我只是看不出这里的问题。

Answer 1

尝试使用控制台查看你的img的src，当你将src设置为“”时，你很可能会得到你的基本网址，所以你的!=“”永远不会是假的。尝试像这样设置你的img:

<img id="1back">

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