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