Cant get javascript DOM selectors to work

Question

Possible Duplicate:
Why does jQuery or a DOM method such as `getElementById` not find the element?

I've been trying to learn js, but im having trouble getting a very simple example to work and i cant seem to find what im doing wrong. From all i understand the below example should work. When i click on the second button, it calls the function f2 and outputs "batman" as an alert, so i know the javascript page is linked correctly. But when i click on the first button nothing happens.

HTML:

<head>
<script type="text/javascript" src="Positioning and flow tests.js"></script>
</head>

<body>

<p id="par1">Test</p>

<button onclick="f1()">Click me for par 1 content</button>

<button onclick="f2()">Click me for predefined text</button>
</body>
</html>

Javascript

// JavaScript Document

var var1 = document.getElementById("par1");

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
alert("batman");
}

score 3 · Accepted Answer · answered Feb 03 '13 at 23:35

3

You have to put the JavaScript at the bottom of the page, otherwise the par1 element won't be available when your code runs:

<head>
    <title>Positioning and flow tests</title>
</head>

<body>
    <p id="par1">Test</p>
    <button onclick="f1()">Click me for par 1 content</button>
    <button onclick="f2()">Click me for predefined text</button>
    <script type="text/javascript" src="Positioning and flow tests.js"></script>
</body>

An alternative to this, is to set your code to run when the page has finished loading:

var var1;
window.onload = function () {
    var1 = document.getElementById("par1");
};

function f1()
{
    alert(var1.innerHTML);
}

function f2()
{
    alert("batman");
}

but this will wait until the page has completely loaded, which includes downloading all the images. If you were to click on the first button before all the images have been fully downloaded, you'd get an error.

answered Feb 03 '13 at 23:35

Joseph Silber

193,614
53
339
276

Or wrap the function in an onload handler. – isherwood Feb 03 '13 at 23:35
Or put `var1 = document.getElementById("par1");` inside the function `f1` – Popnoodles Feb 03 '13 at 23:37
@popnoodles - That would query the DOM every time the button is clicked. – Joseph Silber Feb 03 '13 at 23:39
@JosephSilber I don't see that as an issue – Popnoodles Feb 03 '13 at 23:40
@popnoodles - Can we agree to disagree? – Joseph Silber Feb 03 '13 at 23:53
Fantastic, thanks everyone! – user1787489 Feb 03 '13 at 23:56
You could explain why it's an issue and I might change my mind. – Popnoodles Feb 04 '13 at 00:42
@popnoodles - Even though `getElementById` is the fastest query there is, DOM traversal is still one of the slowest things you can do in JavaScript. [Here's an article explaining that](http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-jquery-newbs-stop-jumping-in-the-pool/) (it talks about jQuery, where the traversal is usually *much* more expensive, but the point is the same). – Joseph Silber Feb 04 '13 at 19:09
i suppose it all adds up – Popnoodles Feb 04 '13 at 23:13

score 1 · Answer 2 · answered Feb 03 '13 at 23:40

You need to either put the code after the element or do this: HTML:

<body onload="init()">
...

JS:

var var1;
function init() {
    var1 = document.getElementById("par1");
}

function f1()
{
    alert(var1.innerHTML);
}

The problem is you are trying to get an element that has yet to be created and therefore doesn't exist. Using an 'init' function will wait until the entire document has loaded before trying to get the elements.

Cant get javascript DOM selectors to work

2 Answers2