Trying to display image using document.write

jstewart157 · 01-14-2012, 11:04 PM

Filename: front.htm
Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js,
styles.css
-->
<title>The Ridgewood Herald Tribune</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script src="random.js" type="text/javascript"></script>

<script src="ads.js" type="text/javascript"></script>
</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section">Main</p>
<p class="linksub">
<a href="#">Home</a><br />
<a href="#">Subscriptions</a><br />
<a href="#">Contact Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section">News</p>
<p class="linksub">
<a href="#">Local</a><br />
<a href="#">National</a><br />
<a href="#">International</a><br />
</p>

<p class="section">Sports</p>
<p class="linksub">
<a href="#">Baseball</a><br />
<a href="#">Basketball</a><br />
<a href="#">Football</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey</a><br />
<a href="#">Miscellaneous</a><br />
</p>

<p class="section">Opinion</p>
<p class="linksub">
<a href="#">Editorials</a><br />
<a href="#">Columnists</a><br />
<a href="#">Letters</a><br />
</p>

<p class="section">Classifieds</p>
<p class="linksub">
<a href="#">Employment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Personals</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted</a><br />
</p>

<p class="section">Other</p>
<p class="linksub">
<a href="#">Business</a><br />
<a href="#">Weather</a><br />
<a href="#">Entertainment</a>
</p>
</div>

<div id="main">
<div id="ads">
<script type="text/javascript">
/*
generate a random integer from 1 to 5
*/
var rNumber = randInt(5);

/*
description of the random ad
*/
var rAd = adDescription(rNumber);

/*
URL of the random ad
*/
var rLink = adLink(rNumber);

document.write('<a href="'+rLink+'">');
document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />);
document.write(adLink);
document.write("</a>");
</script>

</div>

<div id="request"><a href="#">Contact us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in New Jersey, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b>  °  10010 Atwood Ave.
 °  Ridgewood, NJ     07451<br />
Phone: (201)555-1101  °  Fax: (201)555-1102
</address>
</div>

</body>
</html>

FreelanceCoder · 01-15-2012, 12:13 AM

is your code as you have it here or is there more to it but you are only showing the part you thing is causing the page to fail ?

its just that you have unclosed divs

also can you give us a few examples of the acutal file names of the images.

I suspect you have the single quotes in the wrong place, but need to know the file names first.

felgall · 01-15-2012, 04:13 AM

Instead of:

Code:

<div id="ads"></div>

and then link an external JavaScript just before the </body> tag containiing the following:

Code:

(function(adDescription, adLink) {
 var rNumber = randInt(5);
 var rAd = adDescription(rNumber);
 var rLink = adLink(rNumber);

 document.getElementById('ads').innerHTML = '<a href="'+rLink+'"><img src="' +
     rLink+'ads'+rNumber+'.jpg" alt="'+rAd+'"/>'+adLink+<\/a>';
})(adDescription, adLink);

The quotes in your antiquated document.write statements were mismatched as well as missing the img tag which is why they didn't work (also something else in the page might have been interfering as that version of the code is easily interfered with unlike this version which is almost completely unobtrusive and only relies on the id and the two arrays to exist in order for it to work).