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

【问题标题】：What is the correct way to refer to HTML elements via JavaScript?通过 JavaScript 引用 HTML 元素的正确方法是什么？
【发布时间】：2010-01-15 16:56:21
【问题描述】：

我正在使用纯 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;
    }

HTML 看起来像这样：

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

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

任何人都可以对此有所了解吗？是否有任何一般规则可以帮助我理解它是如何工作的？或者有关该主题的一些文档？

编辑：修改代码：

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

【问题讨论】：

据我所知，您的 HTML 根本不包含您的 JavaScript 代码（即，甚至没有脚本标签）。你是如何运行它的？
是的，为了简洁起见，我把这条线省略了。我正在使用这一行：
好吧，我设法通过将所有内容放在 window.onload 中然后每次都使用 document.getElementById() 而不是将其分配给变量然后使用变量来使其工作。看起来有点丑，但它有效：s
我知道人们会说这与问题无关，但我会帮自己一个忙并使用 JavaScript 库来处理这类事情。它会让你的生活变得更轻松。
勇敢但徒劳。去下载jQuery。

标签： javascript html getelementbyid

【解决方案1】：

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

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

这里是 edwards 院长关于使用 window.onload 的blog post

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

【讨论】：

错误：红色未定义（与所有 d2h 一致）将代码放在页面底部似乎没有任何改变。
@Chimp：我会使用我发布的代码。它应该可以正常工作。
加载时不会出现任何错误，但当您使用下拉菜单选择值时会显示“红色未定义”。如果您将“红色”更改为 document.getElementById('red') （与绿色等相同），那么它将起作用。仍然需要一些工作 - 它没有正确转换为十六进制。干杯！
@Chimp：它正在正确转换。您只需确保每个十六进制字符串的长度为 2（'09' 而不是 '9'）。看看我修改过的代码——它工作得很好。

【解决方案2】：

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

另外当您将函数分配给事件时，请仅使用名称（无括号），否则函数会在此处直接调用，然后..

所以

red.onchange = update();

应该是

red.onchange = update;

【讨论】：