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


i making colour-picker using pure javascript , html. consists of 3 html selects (drop downs boxes) , 1 div background-colour of changed javascript. trying "correctly" possible. means no javascript code in html.

my code far looks 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 html looks 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 document.getelementbyid() calls return null. presumably because don't exist @ time code run. have tried putting code inside window.onload = function() {} a) gets confusing , b) have define update function inside function, doesn't seem right.

can shed light on this? there general rules might me understand how works? or documentation on 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> 

putting code in handler onload event works fine, , accepted. putting function within function (depending on 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 blog post dean edwards using window.onload

another option put javascript @ bottom of page instead of @ top.


Comments

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

c++ - Convert big endian to little endian when reading from a binary file -