Member Avatar for WolfShield

So,
I am looking into web creation and have started making a site just to see how the coding of
websites work and how the files link to each other. So, what I am trying to do is when the page
loads it prompts "What is your name?" with a default value of "John". Then, when the user
hits 'okay' it displays 'Hello John!' or whatever the name is. However, the variable is
not being added to the <p> text. Here are the three files (.htm, .css, .js):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>JavaScript Test One</title>
<link rel="stylesheet" type="text/css" href="one.css" />
<script type="text/javascript" src="index.js"></script>
</head>

<body>
<h1>JavaScript Test Site One</h1>

<table class="pos_fixed">
<tr>
	<td><a href="#index">Home</a></td>
</tr>
<tr>
	<td><a href="#one">One</a></td>
</tr>
<tr>
	<td><a href="#two">Two</a></td>
</tr>
<tr>
	<td><a href="#three">Three</a></td>
</tr>
<tr>
	<td><a href="#four">Four</a></td>
</tr>
<tr>
	<td><a href="#five">Five</a></td>
</tr>
</table>

<p style="text-align:center; font-size:30px;" id="helloText">Hello!</p>

<table class="center"> <!-- Spacer -->
<tr>
	<td></td>
</tr>
</table>

<hr />
<p> © WildCat Programming, Inc. </p>

</body>
</html>
body { background-color:#0099FF; text-align:center;}

h1 { text-align:center; }

a { text-decoration:none; }
a:link { color:#000000; }
a:visited { color:#000000; }
a:hover { color:#FFFFFF; }
a:active { color:#B0B0B0; }

table.pos_fixed { position:fixed; border-style:outset; border-width:5px; width:100px; background-color:#C0C0C0; }

table.center, td.center { margin-left:auto; margin-right:auto; width:50%; height:1500px; }
var name = prompt("What is your name?","John")
if (name!=null && name!="") {
	document.getItemById("helloText").innerHTML='Hello ' + name + '!';
} else {
	document.getItemById("helloText").innerHTML='None';
}

document.write(name) shows that 'John' is, in fact, saved in the var 'name', but for
some reason it is not being displayed in the paragraph text. I tried deleting all of the
style code from the 'helloText' paragraph, but that still did not display the variable.

So, what (I'm sure) simple thing am I missing/messing up?

Thanks in advance,

- WolfShield

  • 2 Contributors
  • 2 Replies
  • 4K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by WolfShield
Member Avatar for Airshow

WolfShield,

The main thing is that the javascript runs as the page loads before the browser has had a chance to convert the HTML into DOM elements and then rendered them. You need to cast the code inside an "onload handler", which runs after the page has loaded.

Another thing is that document.getItemById should be replaced with document.getElementById (twice).

window.onload = function() {
	var name = prompt("What is your name?","John");
	if (name) {
		document.getElementById("helloText").innerHTML='Hello ' + name + '!';
	} else {
		document.getElementById("helloText").innerHTML='None';
	}
};

I haven't test this but think it should work.

Airshow

Member Avatar for WolfShield

Wow,
Thank you very much! Works perfectly.

- WolfShield

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.