CODEWITHSUNDEEP
javascriptfunctioncall
NickSS
NickSS

Reputation: 35

New to JavaScript - why won't my function execute?

I'm taking an intro JavaScript course and I'm following all of the directions but the function is not executing. I have viewed many "JavaScript won't execute" questions on StackOverflow and none of them contained an answer that would solve my problem.

Here is the HTML header:

<!DOCTYPE>
<html>
<head>
<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="random.js"></script>
<script>
/*
The showImg() function displays a random image from the 0.jpg through 9.jpg files. The
random image is designed to thwart hackers attempting to enter the library records data
base by requiring visual confirmation
*/

function showImg() {
    var imgNumber = randomInteger(9);
    // Return a random number from 0 to 9
    document.write("<img 'src=" + imgNumber + ".jpg' alt='' />");
}

</script>
</head>

Here is the portion of my HTML calling the function. It's supposed to call four times in order to output the HTML string five times and show five of the number images on the webpage.

<table border="1" cellpadding="5" cellspacing="0">
<tr>
   <th>Username</th>
   <td><input size="20" /></td>
</tr>
<tr>    
   <th>Password</th>
   <td><input type="password" size="20" /></td>
</tr>
<tr>
   <td>As a final security check, enter the 5 numbers 
   you see displayed below.</td>
   <td><input size="6" /></td>
</tr>
<tr>
   <td colspan="2" class="center">
   <input type="button" value="View Library Records" />
   </td>
</tr>
<tr>
   <td colspan="2" class="center">
   <script>showImg();showImg();showImg();showImg();showImg();</script>
   </td>
</tr>
</table>
</div>

When I open the page it doesn't output anything; just stays the way I wrote it with the script element and function call. The table cell simply shows up as empty. I've put a message box into the function to see if it even enters it at all, and it does, but the message box only appears once (no matter how many times I call the function).

The JavaScript file (random.js) as well as the HTML is all provided and working so I only included the relevant sections.

Upvotes: 0

Views: 383

Answers (2)

Ian
Ian

Reputation: 11850

Not sure if this is related, but you have "<img 'src=" instead of "<img src='"

Other than that, defining 

function randomInteger(rng) {
    return Math.round(Math.random() * rng);
}

and changing your document.write line to 

document.write("<b>" + imgNumber + ".jpg</b> ");

worked fine for me.

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92324

This line

 document.write("<img 'src=" + imgNumber + ".jpg' alt='' />");

Has an apostrophe out of place. It should be

 document.write("<img src='" + imgNumber + ".jpg' alt='' />");


<table border="1" cellpadding="5" cellspacing="0">
<tr>
   <th>Username</th>
   <td><input size="20" /></td>
</tr>
<tr>    
   <th>Password</th>
   <td><input type="password" size="20" /></td>
</tr>
<tr>
   <td>As a final security check, enter the 5 numbers 
   you see displayed below.</td>
   <td><input size="6" /></td>
</tr>
<tr>
   <td colspan="2" class="center">
   <input type="button" value="View Library Records" />
   </td>
</tr>
<tr>
   <td colspan="2" class="center">
     <script>
     function showImg() {
        var imgNumber = Math.floor(Math.random() * 9);
        document.write("<img src='" + imgNumber + ".jpg' alt='' />");
     }
     showImg();showImg();showImg();showImg();showImg();
     </script>
   </td>
</tr>
</table>

Upvotes: 1

Related Questions