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
Post a Comment