Question

我是javascript的新手，我正在创建一个游戏，用户通过点击重新排列图片表。这些图像实际上是用户必须整理的较大图像的碎片。

用户单击表格中的一个图像，然后单击表格中的另一个图像，并交换位置。我必须使用javascript，所以我创建了一个3x4表，并填充了12个“部分”图像，需要重新安排。

每次页面加载时，我都需要将图像放在随机单元格中，这样每个游戏，用户都必须以不同的方式对图像进行排序。

为此，我使用diffImage（）函数从我拥有的图像数组中选择一个随机图像。因此，如果我的一个图像名为“mario01.jpg”，则该功能会拍摄图像并使其成为<img src="mario01.JPG" />.

我的diffImage（）函数还会从阵列中选择它所选择的图像，这样图像就不会再次插入到表格中。

然后我使用我的差异图像功能为每个图像提供一个随机源。

但是，现在当我加载页面时，没有图像显示，我收到一条错误， [错误] TypeError：'null'不是对象（评估'document.getElementById（“image1”）。src = diffImage（）'）全球代码（pictureGame.html，第49行）

我看不出我在这里做错了什么。我不是给图片一个来源，然后将它插入表中？这是我到目前为止所做的代码：

        <head>
        <link rel="stylesheet" href="CSS.css" type="text/css"/>
        <title>Picture Scramble Game</title>
        </head>
        <script>
        var imagelist = ["mario01.JPG", "mario02.JPG", "mario03.JPG", "mario04.JPG", "mario05.JPG", "mario06.JPG", "mario07.JPG", "mario08.JPG", "mario09.JPG", "mario10.JPG", "mario11.JPG", "mario12.JPG"];


        function diffImage() {
        var output = '';
        whichImage = Math.floor(Math.random()*imagelist.length);
        output = imagelist[whichImage];
        imagelist.splice(whichImage,1);
        return output;
    }

document.getElementById("image1").src = diffImage();
document.getElementById("image2").src = diffImage();
document.getElementById("image3").src = diffImage();
document.getElementById("image4").src = diffImage();
document.getElementById("image5").src = diffImage();
document.getElementById("image6").src = diffImage();
document.getElementById("image7").src = diffImage();
document.getElementById("image8").src = diffImage();
document.getElementById("image9").src = diffImage();
document.getElementById("image10").src = diffImage();
document.getElementById("image11").src = diffImage();
document.getElementById("image12").src = diffImage();


        </script>
        <body onload="addEventListeners();">
        </script>
        <div id="table">
        <table>
            <tr><td><img class="element" id="image1" src="mario02.jpg" /></td>
            <td><img class="element" id="image2" src="mario02.jpg" /></td>
            <td><img class="element" id="image3" src="mario01.jpg" /></td>
            </tr>
            <tr><td><img class="element" id="image4" src="mario05.jpg" /></td>
            <td><img class="element" id="image5" src="mario04.jpg" /></td>
            <td><img class="element" id="image6" src="mario06.jpg" /></td>
            </tr>
            <tr><td><img class="element" id="image7" src="mario09.jpg" /></td>
            <td><img class="element" id="image8" src="mario08.jpg" /></td>
            <td><img class="element" id="image9" src="mario07.jpg" /></td>
            </tr>
            <tr><td><img class="element" id="image10" src="mario11.jpg" /></td>
            <td><img class="element" id="image11" src="mario10.jpg" /></td>
            <td><img class="element" id="image12" src="mario12.jpg" /></td></tr>
        </table>
        </div>
        </body>

Answer 1

您的代码在页面上的元素可用之前正在运行。

将脚本移到底部，就在关闭正文标记之前。

Answer 2

把你所有的

document.getElementById("image1").src = diffImage();

在函数内部并在body onload中调用该函数

function newFunction()
{

    document.getElementById("image1").src = diffImage();
    ...
}


    <body onload="addEventListeners(); newFunction();">

使用Javascript随机将图像插入表中

2 个答案: