What is the correct way to refer to HTML elements via JavaScript?

Question

Hello. I am making a colour-picker using pure JavaScript and HTML. It consists of three HTML selects (drop downs boxes) and one div the background-colour of which will be changed by JavaScript. I am also trying to do this as "correctly" as possible. This means no Javascript code in the HTML.

My code so far looks like this:

    var red = document.getElementById('red');
    red.onchange = update();

    var green = document.getElementById('green');
    green.onchange = update();

    var blue = document.getElementById('blue');
    blue.onchange = update();

    var thebox = document.getElementById('colourbox');

    function d2h(d) {return d.toString(16);}
    function h2d(h) {return parseInt(h,16);} 

    function update(){
        finalcolor = '#' + d2h(red.value) + d2h(green.value) + d2h(blue.value)
        thebox.style.background = finalcolour;
    }

And the HTML looks like this:

<div id="colourbox"></div>
<form name="myform" action="colour.html">
    <select name="red" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
    <select name="green" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
    <select name="blue" id="red">
        <option value="0">0</option>
        .... etc etc ....
    </select>
</form>

The trouble is that all the document.getElementById() calls return null. Presumably because they don't exist at the time that the code is run. I have tried putting the code inside an window.onload = function() {} but a) that just gets confusing and b) I would then have to define the update function inside a function, which doesn't seem right.

Can anyone shed some light on this? Are there any general rules which might help me understand how it works? Or some documentation on the subject?

EDIT: revised code:

<script type="text/javascript">
    window.onload = function(){
        var red = document.getElementById('red');
        red.onchange = update();

        var green = document.getElementById('green');
        green.onchange = update();

        var blue = document.getElementById('blue');
        blue.onchange = update();

        var thebox = document.getElementById('colourbox');

        function d2h(d) {return d.toString(16);}
        function h2d(h) {return parseInt(h,16);} 

        function update(){
            var finalcolor = '#' + d2h(document.getElementById('red').value) + d2h(document.getElementById('green').value) + d2h(document.getElementById('blue').value);

            document.getElementById('colourbox').style.background = finalcolor;
        }

    }
</script>

Answer 1

putting code in a handler for the onload event works just fine, and is widely accepted. So is putting a function within a function (depending on the reason).

var mypage = {
    red: null,
    green: null,
    blue: null,
    colourbox: null,

    d2h: function(d) {
        var hex = d.toString(16);
        if (hex.length < 2) {
            hex = '0' + hex;
        }
        return hex.toUpperCase();
    },

    h2d: function(d) {
        return parseInt(h, 16);
    },

    update: function() {
        mypage.colourbox.style.backgroundColor = '#' + mypage.d2h(mypage.red.value) + mypage.d2h(mypage.green.value) + mypage.d2h(mypage.blue.value);
    }
};

window.onload = function() {
    mypage.red = document.getElementById('red');
    mypage.red.onchange = mypage.update;

    mypage.green = document.getElementById('green');
    mypage.green.onchange = mypage.update;

    mypage.blue = document.getElementById('blue');
    mypage.blue.onchange = mypage.update;

    mypage.colourbox = document.getElementById('colourbox');
}

Here is a blog post by dean edwards about using window.onload

Another option is to put your javascript at the bottom of the page instead of at the top.

Answer 2

As the others said you will need to wrap your code inside a function and call it from the window.onload event..

Also when you assign a function to an event, use the name only (no parenthesis) or the function gets called right there and then ..

so

red.onchange = update();

should be

red.onchange = update;