Randomly inserting images into table using Javascript

Question

I'm very new to javascript and I'm creating a game where a user re-arranges a table of pictures by clicking. The images are really scrambled pieces of a larger image that the user has to sort out.

The user clicks on one of the images in the table, then clicks another image in the table, and they swap positions. I have to use javascript for this, so Ive created a 3x4 table and filled it with 12 "partial" images that need to be re-arranged.

Each time the page loads, I need to have the images put in random cells so that each game, the user has to sort the images in a different way.

To do this, I use a diffImage() function that picks a random image from an array of images that I have. So if one of my images is named "mario01.jpg", the function takes the image and makes it <img src="mario01.JPG" />.

My diffImage() function also takes that image that it selected out of the array so that the image won't be inserted for a second time into the table.

I then use my diff image function for each image to give it a random source.

However, now when I load the page, no images show up and I get an error that says, [Error] TypeError: 'null' is not an object (evaluating 'document.getElementById("image1").src = diffImage()') global code (pictureGame.html, line 49)

I can't see what Im doing wrong here. Am I not giving the picture a source, and then inserting it into the table? Here is the code I have done so far:

        <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>

score 1 · Accepted Answer · answered May 17 '14 at 14:10

1

Your code is running before the elements are available on the page.

Move the script to the bottom, just before the closing body-tag.

answered May 17 '14 at 14:10

Andy G

19,232
5
47
69

score 1 · Answer 2 · answered May 17 '14 at 14:30

put all your

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

inside a function and call that function in the body onload

function newFunction()
{

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


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

Randomly inserting images into table using Javascript

2 Answers2

Linked