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

我使用纯JavaScript和HTML制作颜色选择器。它由三个HTML选择（下拉框）和一个div组成，其背景色将通过JavaScript进行更改。我也试图尽可能“正确地”做到这一点。这意味着HTML中没有Javascript代码。什么是通过JavaScript引用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; 
    }

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

来源

2010-01-15 Mr_Chimp

就我所见，你的HTML根本不包括你的JavaScript代码（即，甚至没有脚本标签）。你如何运行它？ – danben 2010-01-15 16:59:51

是的，为了简洁起见我把这条线留下了。我正在使用这一行： – 2010-01-15 17:05:37

嗯，我设法通过将所有内容放在window.onload中，然后使用document.getElementById （）每次，而不是分配给一个变量，然后使用变量。看起来有点丑，但它有效：s – 2010-01-15 17:07:34

把代码在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'); 
}

这里是一个blog post由院长爱德华兹如何使用的window.onload

另一种选择是把你的JavaScript在页面的底部，而不是顶部。

来源

2010-01-15 16:58:33

错误：未定义红色（与所有d2h一致）将代码放在页面底部看起来不会改变任何内容。 – 2010-01-15 17:14:55

@Chimp：我会使用我发布的代码。它应该工作得很好。 – 2010-01-15 17:16:44

加载时不会给出任何错误，但当您使用下拉列表选择一个值时，它会显示“红色未定义”。如果你把“red”改成document.getElementById（'red'）（和绿色等一样），那么它就会起作用。仍然需要一些工作 - 它不能正确转换为十六进制。干杯! – 2010-01-15 17:26:24

正如有人说，你需要换你的代码的函数内，从window.onload事件称之为..

此外当你将一个函数的事件，只使用名称（没有括号），或者调用该函数在那里，然后..

所以

red.onchange = update();

应该

red.onchange = update;

来源

2010-01-15 17:09:00

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

回答

相关问题