Problem with Try It Out--Displaying a Random Image when the Page Loads

rhieger · October 22nd, 2011, 12:52 PM

I am an intermediate newbie in the world of JavaScript. My question concerns the Try It Out example entitled Displaying a Random Image when the Page Loads, page 204.

I am not getting any response from the onclick() event that changes images randomly.

While I have modified the original code to include HTML5 rather than XHTML, I doubt this would cause the code not to function correctly. If I am wrong, mea culpa.

As I say, clicking on the flag images produces absolutely no result.

Anyway, I paste in my code below. Hopefully a more insightful sort than myself will be able to point out my error:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="../../css/exercise.css" />

<style>

img {
border: 0;
}

</style>

<title>Try It Out Exercise 3: Random Image</title>

<script src="../../js/navLib.js">
/* Library of Navigational Functions */
</script>

<script>

var myImages = new Array("..\..\images\usa.gif", "..\..\images\canada.gif",
"..\..\images\jamaica.gif", "..\..\images\mexico.gif");

function changeImg(that) {

var newImgNumber = Math.round( Math.random() * 3 );

while ( that.src.indexOf( myImages[newImgNumber] ) != -1) {
newImgNumber = Math.round( Math.random() * 3 );

} // end while

that.src = myImages[newImgNumber];

return false;

} // end changImg(that)

</script>

</head>

<body>

<header>
<hgroup>
<h1>Try It Out Exercise 3</h1>
<h2>Displaying a Random Image When the Page Loads</h2>
</hgroup>
</header>

<section>

<img name="img0" src="../../images/chapter.06/usa.gif"
width="144" height="83"
onclick="return changeImg(this)" />

<img name="img1" src="../../images/chapter.06/mexico.gif"
width="144" height="83"
onclick="return changeImg(this)" />

</section>

<footer>
<input type="button" title="Return to Chapter 6 Index"
value="Return to Chapter 6 Index"
onClick="goToPage('../#tryItOut');" />
</footer>

</body>

</html>

================================================== ===

Many thanks in advance for any assistance you can provide.

Sincerely,

Robert Hieger

jmcpeak · October 23rd, 2011, 03:11 PM

Howdy, Robert.

The first thing that sticks out at me is the myImages array. The \ character denotes an escape sequence, so the myImage initialization needs to be changed to:

Code:

var myImages = new Array("..\\..\\images\\usa.gif", 
    "..\\..\\images\\canada.gif",
    "..\\..\\images\\jamaica.gif",
    "..\\..\\images\\mexico.gif");

rhieger · October 24th, 2011, 03:35 AM

Dear Mr. McPeak,

First of all, thank you very much for taking the time to reply to my post. Obviously I made the silliest of beginner's errors in forgetting that a backslash is the beginning of an escape sequence.

I have made the corrections as follows:

Code:

var myImages = new Array("WebProgramming\\beg_javascript\\images\\usa.gif",
                                     "WebProgramming\\beg_javascript\\images\\canada.gif",
                                     "WebProgramming\\beg_javascript\\images\\jamaica.gif",
                                     "WebProgramming\\beg_javascript\\images\\mexico.gif");

The script still does not function correctly.

If I click on the leftmost usa.gif image, invariably mexico.gif appears and the mexico.gif image to the right simply disappears to be replaced by
nothing. A subsequent click on the mexico.gif that replaced the original usa.gif, simply causes all gifs to disappear from the browser window.

If I refresh the browser starting with the two original flag images, then
click on the rightmost mexico.gif, then the mexico.gif disappears to be replaced by nothing, and the usa.gif to the left remains.

My understanding is that each click on either gif will cause a random selection of the flag gifs to replace them. So far, this is not happening.

Any further assistance you can provide is greatly appreciated.

Thanks,

Robert Hieger

rhieger · October 27th, 2011, 03:35 PM

I have tried one last ditch effort to make the above script work. Rather than making an array of image names that are in their own image directory, I simply moved the images to the same directory as the HTML file.

Now the JavaScript works perfectly. My current code is pasted in below:

Code:

<!DOCTYPE html>

<html>

    <head>
    
        <meta charset="utf-8" />
        
        <link rel="stylesheet" href="../../css/exercise.css" />
        
        <style>
        
            img {
                border: 0;
            }
            
        </style>
        
        <title>Try It Out Exercise 3: Random Image</title>
        
        <script src="../../js/navLib.js">
            /* Library of Navigational Functions */
        </script>
        
        <script>
        
            var myImages = new Array("usa.gif", "canada.gif",
                                     "jamaica.gif", "mexico.gif");
            
            function changeImg(that) {
                
                var newImgNumber = Math.round( Math.random() * 3 );
                
                while ( that.src.indexOf( myImages[newImgNumber] ) != -1) {
                    newImgNumber = Math.round( Math.random() * 3 );
                    
                }    // end while
                
                that.src = myImages[newImgNumber];
                
                return false;
                
            }    // end changImg(that)
        
        </script>
        
    </head>
    
    <body>
    
        <header>
            <hgroup>
                <h1>Try It Out Exercise 3</h1>
                <h2>Displaying a Random Image When the Page Loads</h2>
            </hgroup>
        </header>
        
        <section>
        
            <img name="img0" src="usa.gif"
             width="144" height="83"
             onclick="return changeImg(this)" />
         
             <img name="img1" src="mexico.gif"
             width="144" height="83"
             onclick="return changeImg(this)" />
                             
        </section>
        
        <footer>     
            <input type="button" title="Return to Chapter 6 Index"
             value="Return to Chapter 6 Index"
             onClick="goToPage('../#tryItOut');" />
        </footer>
    
    </body>
    
</html>

Is it really possible that JavaScript is unable to handle directory trees? In my older version, I certainly correctly referenced the correct path to the images, yet I got incorrect results--no randomization, and all image replacements stopped after one iteration. Further, the rightmost flag never changed to anything but a blank space.

It's great that the code now works, but why should the images have to reside in the same folder with the HTML document? This is very limiting.

Any assistance anyone can provide is greatly appreciated.

Sincerely,

Robert Hieger

jmcpeak · October 27th, 2011, 04:33 PM

Howdy, Robert. I apologize for missing your earlier reply.

One thing to remember about the path is it's not JavaScript, but the browser. You're changing an <img/> element's src attribute. So it's not a JavaScript problem, but a path problem.

From looking at your original code, the <img/> elements were looking for the images in the base path "../../images/chapter.06/". But in the JavaScript, the base path was "../../images/". Notice the path in the JavaScript omitted the "chapter.06" directory. Add that directory to the path, and you should get the results you desire.