Having some trouble loading random images on a page using basic JavaScript code. Following homework instructions, but the images are not showing up in the web browser. Any assistance would be greatly appreciated. Here is the code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 10
Review Assignment
Monroe Public Library
Author: Collin Klopstein
Date: November 13, 2013
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showImg() {
/*
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 database by requiring visual confirmation.
*/
var imgNumber = randomInteger(9);//return a random number from 0 to 9
document.write("<img src='imgNumber.jpg' alt='' />");
}
function randomInteger(size) {
return Math.floor((size+1)*Math.random());
}
</script>
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...