Help with displaying data properly

Brian Legg

Ranch Hand

Posts: 488

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Take it easy on me, complete JavaScript newb

Here is my simple code (CSS added into head for readability):

<HTML>
	<HEAD>
		<TITLE>Using Loops</TITLE>
		<style type="text/css">
			body {
				font-size:24px;
				font-weight:bold;
			}
			a {
				color:#8BA870;
				text-decoration:none;
			}
			a:hover {
				text-decoration:underline;
			}
			a:visited {
				color:#5DFC0A;
			}
		</style>
		<script language="JavaScript">
			function count(value) {
				var number = parseInt(value)
				for(var loop = 1; loop < (number + 1); loop++) {
					if(loop != number) {
						document.write(loop + ", ")
					} else {
						document.write(loop)
					}
				}
			}
		</script>
 	</HEAD>
 	<BODY bgcolor="green">
 		<CENTER>
 		<H1>Using Loops</H1>
 		<P><br><br><br><br>
		<form name="countForm">
			Please enter a number in the box: <input type="text" name="countText" size=5 maxlength=5 value="0"><br><br><br>
			<input type="button" name="countButton" value="Count" onClick='count(document.countForm.countText.value)'><br><br>
		</form>
		<br><br><br><br><a href="master.html">Back</a>
		</CENTER>
 	</BODY>
</HTML>

The user enters a number in a box and presses "Count" and the number is printed on the screen starting with 1, 2, 3, ... up to the users number. My question is that when this runs it does it on a fresh white screen with everything else gone. How do I go about having the output "1, 2, 3, etc" as part of the page itself. How can I not only add it into the page but put it into it's own div or class so that I can control how the output will look?

Thank you in advance!

SCJA
~Currently preparing for SCJP6

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

document.write() should be avoided like the plague. It's only useful during the initial run of displaying the page, and even then there are better ways to do things. Used after the page is initially displayed, it replaces the page with whatever you are writing, as you have seen. Pretend it does not exist.

Rather, investigate DOM manipulation and the use of the innerHTML property.

[Asking smart questions] [About Bear] [Books by Bear]