.getElementById(); issue - please help

JavaScript
1

Hello,

I am still very new at Javascript, I’ve only recently pursued web design as a vocation.

the issue I am having is the following:

<!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” lang=“en-US”>
<head>
<title></title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<script>

var target=document.getElementById("[B]tagline[/B]");
alert([B]target.nodeName[/B]);

</script>
</head>
<body>
<div id=“container”>
<div id=“tagline”>
<h1>Pizza!</h1>
<p>Welcome to a site about making pizza</p>
</div><!–end tagline–>
<p>General Ingredients</p>
<ul>
<li>Pizza dough</li>
<li>Tomato Sauce</li>
<li>Mozorella cheese</li>
</ul>
<p>While pizza is delicious with the above ingredients, it is even better when you add toppings!</p>
<ul>
<li>Buffalo Chicken</li>
<li>Olives</li>
<li>Extra Cheese</li>
<li>Garic Powder</li>
<li>Onion Powder</li>
<li>Onion</li>
<li>Steak</li>
</ul>
</div>
</body>
</html>

I am currently reading Kevin Yank’s and Cameron Adams’ Simply Javascript book and I have had no issues following it so far, but this very easy bit of code is giving me a tremendous amount of trouble.

This is what I have attempted to diagnose:

  1. Embed js (I always use external files)
  2. open html in Chrome, FF, IE
  3. open html from local path and from my domain via its stage
  4. empty browser’s saved data (cookies, cache, history etc)
  5. Ensure HTML markup is not impeding JS -> W3C XHTML valid
  6. Reread Simply Javascript Chapter 3.

Its beyond me as to why such a simple and small amount of code could possibly fail. Thanks for reading and offering suggestions!

2

The problem is that your attempting to execute the code before the DOM (Document Object Model) is ready, to fix the issue you can do one of two things:

  1. Use the window.onload method which waits for the DOM to be ready before it executes the code
  2. Place the <script> tags before the closing </body> tag which will always wait until the DOM is ready

Personally i would choose option 2 as it’s a much more standard way of using JavaScript in a webpage these days.

3

That sounds great!

I’d rather not use window.onload for the same reason, always best to minimize code :slight_smile:

I would prefer to use external than embedded code - are you suggesting the following…

  1. </body><script type=text/javascript src=“.js”><
  2. <script src=“.js”></script><body>
4

Basically with what your trying to do you would simply use something like the below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>

    <div id="tagline"></div>

    <script>
        var target = document.getElementById('tagline');
        alert(target.nodeName);
    </script>

</body>
</html>
5

That worked, thanks Chris.

6

Your welcome

Sent from my iPhone using Tapatalk