ansaurus

Question

Answer 1

+4 A:

I do this ALL the time...

getElementByid

should be

getElementById

EDIT: My mistake is to capitalize the d... getElementByID.

Mayo 2009-09-15 13:40:07

+1 - An IDE is helpful for this. I use Eclipse and the code completion is something I depend on. :)

James Black 2009-09-15 13:41:50

also the \" are superfluous. since it is inside single quotes.

andres descalzo 2009-09-15 13:46:09

While it's true he has a typo, that's only part of the problem. The larger conceptual problem is timing.

T.J. Crowder 2009-09-15 13:47:58

I disagree that the placement of the JavaScript is preventing it from working (i.e. the answer to his question). I agree that it's a best practice to ensure that the document is loaded before manipulating it.

Mayo 2009-09-15 13:54:37

You can disagree if you like, but with respect, you're mistaken. Try it, I don't think it even works with trivial documents, but it certainly doesn't with non-trivial ones.

T.J. Crowder 2009-09-15 14:02:06

Answer 2

+2 A:

Scripts run when they are loaded. Since your script appears before the div element you are trying to edit (and since you do nothing to delay it's execution), document.getElementById will return null and the script will error.

Move the script to immediately before </body>.

Additionally, the method is getElementById not getElementByid.

That said, depending on JavaScript to add basic navigation is a poor idea. You would likely be better off using a pre-processor or server side solution.

David Dorward 2009-09-15 13:41:59

Answer 3

+2 A:

The problem is that you're trying to access an element by ID that doesn't exist yet. Your script will be executed at the point it's included. You need to wait until the document has been parsed and the DOM tree has been prepared. You can do that by using a window load event, or if you're using any kind of JavaScript toolkit like Prototype or jQuery, they usually offer something that happens earlier (since window.load only happens after all images are loaded).

EDIT: And, of course, as others have said, that you have a typo, it's getElementById.

T.J. Crowder 2009-09-15 13:43:25

The typo is the root cause. Eliminate the obvious problem first. Then go back to determine whether or not it is necessary to check the state of the DOM.

Mayo 2009-09-15 14:03:30

They're both root causes; it won't work with either un-corrected.

T.J. Crowder 2009-09-15 14:06:15

Answer 4

A:

You will have a problem with the innerHTML approach because the document <div> element you're trying to retrieve may not yet be present in the document. You'll need to call the innerHTML stuff after the document has loaded if you go that route.

There's nothing wrong with document.write here. If you really have to write content dynamically with JavaScript, using document.write will avoid messing about with load event handlers and will make your content appear immediately rather than visibly changing the document once it has loaded.

Tim Down 2009-09-15 13:45:08

Answer 5

A:

You need to call the javascript after the body has loaded so that the element you are referencing has been initialized. To do this you should put your code in a function. e.g.

function buildNav() { ... }

Then on your body tag, use the onload event:

<body onload="buildNav()">

That way the javascript will not run until the body is done loading.

Donal Boyle 2009-09-15 14:01:29

Answer 6

A:

Apart from the ‘id’ capitalisation and order of loading: it's generally a really bad idea to make essential web page content like your navigational links dependent on JavaScript.

This gives you accessibility problems and means search engines will ignore all your links. Not really a good bargain just to save copy-and-pasting a few <a> tags.

For reproducing common page elements, look at server-based page processing techniques, the simplest of which is SSI.

bobince 2009-09-15 14:28:38

ansaurus

tags:

views:

answers:

innerHTML not writing to document

related questions