通过JavaScript引用HTML元素的正确方法是什么？

我正在使用纯JavaScript和HTML制作一个颜色选择器。它由三个HTML选项（下拉框）和一个div组成，背景颜色将由JavaScript更改。我也在尽可能“正确”地做到这一点。这意味着HTML中没有Javascript代码

到目前为止，我的代码如下所示：

    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;
    }

<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>

HTML如下所示：

    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;
    }

<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>

0
.... 等等等等。。。。
0
.... 等等等等。。。。
0
.... 等等等等。。。。

问题是所有document.getElementById（）调用都返回null。大概是因为它们在代码运行时不存在。我曾尝试将代码放在window.onload=function（）{}中，但a）这会让人困惑，b）然后我必须在函数中定义update函数，这似乎不正确

有人能解释一下吗？有什么一般规则可以帮助我理解它是如何工作的吗？或者一些关于这个主题的文档

编辑：修订代码：

<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>

window.onload=函数（）{
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（'colorBox'）；
函数d2h（d）{返回d.toString（16）；}
函数h2d（h）{返回parseInt（h，16）；}
函数更新（）{
var finalcolor='#'+d2h（document.getElementById（'red'）.value）+d2h（document.getElementById（'green'）.value）+d2h（document.getElementById（'blue'）.value）；
document.getElementById（'colorBox'）。style.background=finalcolor；
}
}

将代码放入onload事件的处理程序中效果很好，并且被广泛接受。将函数放入函数中也是如此（取决于原因）

var mypage={
红色：空，
绿色：空，
蓝色：空，
颜色框：空，
d2h：功能（d）{
var hex=d.toString（16）；
如果（十六进制长度<2）{
十六进制='0'+十六进制；
}
返回hex.toUpperCase（）；
},
h2d：功能（d）{
返回parseInt（h，16）；
},
更新：函数（）{
mypage.colorBox.style.backgroundColor='#'+mypage.d2h（mypage.red.value）+mypage.d2h（mypage.green.value）+mypage.d2h（mypage.blue.value）；
}
};
window.onload=函数（）{
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.colorBox=document.getElementById（'colorBox'）；
}

下面是dean edwards关于使用window.onload的一篇文章

---

另一种选择是将javascript放在页面的底部而不是顶部。

将代码放在onload事件的处理程序中效果很好，并且被广泛接受。将函数放入函数中也是如此（取决于原因）

var mypage={
红色：空，
绿色：空，
蓝色：空，
颜色框：空，
d2h：功能（d）{
var hex=d.toString（16）；
如果（十六进制长度<2）{
十六进制='0'+十六进制；
}
返回hex.toUpperCase（）；
},
h2d：功能（d）{
返回parseInt（h，16）；
},
更新：函数（）{
mypage.colorBox.style.backgroundColor='#'+mypage.d2h（mypage.red.value）+mypage.d2h（mypage.green.value）+mypage.d2h（mypage.blue.value）；
}
};
window.onload=函数（）{
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.colorBox=document.getElementById（'colorBox'）；
}

下面是dean edwards关于使用window.onload的一篇文章

---

另一种选择是将javascript放在页面底部而不是顶部。

正如其他人所说，您需要将代码包装在函数中，并从window.onload事件调用它

另外将函数分配给事件时，请仅使用名称（无括号），否则函数会立即被调用

所以

应该是

red.onchange = update;

---

正如其他人所说，您需要将代码封装在函数中，并从window.onload事件调用它

另外将函数分配给事件时，请仅使用名称（无括号），否则函数会立即被调用

所以

应该是

red.onchange = update;

---

就我所见，你的HTML根本不包含你的JavaScript代码（甚至连一个脚本标签都没有）。你做得怎么样？是的，为了简洁起见，我把那句话忘了。我使用这行代码：我将所有内容都放在window.onload中，然后每次都使用document.getElementById（），而不是将其分配给变量，然后使用该变量，从而使其正常工作。看起来有点难看，但它确实有效：我知道人们会说这与问题无关，但我会帮自己一个忙，使用JavaScript库来完成这类事情。这会让你的生活轻松很多。勇敢但徒劳。去下载jQuery。据我所知，你的HTML根本不包含你的JavaScript代码（甚至连一个脚本标签都没有）。你做得怎么样？是的，为了简洁起见，我把那句话忘了。我使用这行代码：我将所有内容都放在window.onload中，然后每次都使用document.getElementById（），而不是将其分配给变量，然后使用该变量，从而使其正常工作。看起来有点难看，但效果很好：我知道