Problems with Random Image Script in JS

Question

I am trying to get the following script to replace the default images by a random image every time the page refreshes. I keep getting a boxID is null error. Why is boxID null?

  <script type="text/javascript"> 
    function randomThumbs(){
    var unalafois=1;
    for (unalafois=1; unalafois<9; unalafois++){
    boxID=document.getElementById("'unalafois'")
    var duh= Math.ceil(Math.random()*8);
    boxID.src="thumbs/'+duh+'.jpg";
    }}
    </script>

Here is the HTML code:

<body onload="randomThumbs()">
<table>
    <tr>
      <td><img id="1" src="thumbs/1.jpg" /></td>
      <td><img id="2" src="thumbs/2.jpg" /></td>
      <td><img id="3" src="thumbs/3.jpg" /></td>
      <td><img id="4" src="thumbs/4.jpg" /></td>
      <td><img id="5" src="thumbs/5.jpg" /></td>
      <td><img id="6" src="thumbs/6.jpg" /></td>
      <td><img id="7" src="thumbs/7.jpg" /></td>
      <td><img id="8" src="thumbs/8.jpg" /></td>
    </tr>
</table>
</body>

Thanks!

Chandu · Accepted Answer · 2011-04-15 13:34:14Z

3

ID for a HTMLElement cannot start with a number. Change the ID's to something like img-n, where n is a number.

<body onload="randomThumbs()">
<table>
        <tr>
            <td><img id="img-1" src="thumbs/1.jpg" /></td>
            <td><img id="img-2" src="thumbs/2.jpg" /></td>
            <td><img id="img-3" src="thumbs/3.jpg" /></td>
            <td><img id="img-4" src="thumbs/4.jpg" /></td>
            <td><img id="img-5" src="thumbs/5.jpg" /></td>
            <td><img id="img-6" src="thumbs/6.jpg" /></td>
            <td><img id="img-7" src="thumbs/7.jpg" /></td>
            <td><img id="img-8" src="thumbs/8.jpg" /></td>
        </tr>
</table>

Then change your script to:

<script type="text/javascript"> 
    function randomThumbs(){
        var unalafois=1;
        for (unalafois=1; unalafois<9; unalafois++){
          //Use var before boxID, just a best practice
            var boxID = document.getElementById("img-" + unalafois)
            var duh= Math.ceil(Math.random()*8);
            boxID.src="thumbs/" + duh + ".jpg";
        }
    }
</script>

edited Apr 15, 2011 at 13:34

answered Apr 15, 2011 at 13:24

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ishikawa Over a year ago

This didn't completely solve the problem, but it helped a lot; cheers!

manji · Accepted Answer · 2011-04-15 13:23:24Z

1

Remove the quotes if you want to use unalafois as a variable:

boxID=document.getElementById(unalafois)

And don't use IDs starting with numbers, it's illegal if you want to conform to HTML Specs

answered Apr 15, 2011 at 13:23

manji

48k5 gold badges98 silver badges104 bronze badges

Comments

Ishikawa · Accepted Answer · 2011-04-16 22:54:12Z

0

I figured it out! The problem was missing quotes around the 1 on line 3. Here is the final script:

<script type="text/javascript">
function randomThumbs(){
var onecell="1";
for (onecell=1; onecell<9; onecell++){
var picnum=Math.ceil(Math.random()*9);
document.getElementById("img" +onecell).setAttribute("src","thumbs/"+picnum+".jpg");
}}
</script>

answered Apr 16, 2011 at 22:54

Ishikawa

1753 silver badges12 bronze badges

Collectives™ on Stack Overflow

Problems with Random Image Script in JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related