什麼是通過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元素的正確方法？

回答

相關問題