2013-11-14 3 views
0

Я пытаюсь получить страницу для загрузки случайных изображений с помощью простого кода javascript. Я просто пытаюсь следовать указаниям для домашнего задания, и мои изображения не отображаются, когда я открываю веб-браузер. Любая помощь будет большой. Вот мой кодПочему мои случайные изображения не отображаются в браузере?

<?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"> 
     <span>Quick Links</span> 
     <a href="#">Home Page</a> 
     <a href="#">Online Catalog</a> 
     <a href="#">Friends of MPL</a> 
     <a href="#">New Books and Other Good Reading</a> 
     <a href="#">Ohio Virtual Library</a> 
     <a href="#">Internet Public Library</a> 
     <a href="#">Services and Collection</a> 
     <a href="#">Adult Programs</a> 
     <a href="#">Teen Central</a> 
     <a href="#">Children's Room</a> 
     <a href="#">Computers at MPL</a> 
     <a href="#">Computer Rules and Procedures</a> 
     <a href="#">Staff Directory</a> 
     <a href="#">Library Records</a> 
    </div> 

    <div id="main"> 
     <h2>Library Records</h2> 
     <p>To view the library records, enter your username and password.</p> 

     <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 type="text/javascript"> 
        showImg(); 
        showImg(); 
        showImg(); 
        showImg(); 
        showImg(); 
       </script> 
      </td> 
     </tr> 
     </table> 
    </div> 

    <address> 
     <b>Monroe Public Library</b> 
     580 Main Street, Monroe, OH &nbsp;&nbsp;45050 
     <b>Phone</b>(513) 555-0211 
     <b>Fax</b>(513) 555-0241 
    </address> 

</div>  

</body> 
</html> 

ответ

1

Вы должны использовать переменную JavaScript в вашем элементе изображения:

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

Теперь вы будете иметь случайное число в источнике.

+0

Спасибо! Я новичок в javascript, и я ценю помощь! – howdydoody

+0

Прохладный. Удачи вам в выполнении домашнего задания. –

0

Оно должно быть:

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

Спасибо за помощь! – howdydoody

0

Вы не можете сделать следующее в JS

var imgNumber = randomInteger(9);//return a random number from 0 to 9 
document.write("<img src='imgNumber.jpg' alt='' />"); 

imgNumber не является переменной, когда вы кладете его на котировки его просто строку

Что вам нужно сделать это, чтобы разблокировать его.

ie

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

Спасибо за помощь! – howdydoody

Смежные вопросы