Qual é a maneira correta de se referir a elementos HTML via JavaScript?
-
20-09-2019 - |
Pergunta
Estou fazendo um picker de cores usando JavaScript Pure e HTML. Consiste em três selecionas HTML (caixas de retirada) e uma div, cuja cor de fundo será alterada pelo JavaScript. Também estou tentando fazer isso o mais "corretamente" possível. Isso significa que nenhum código JavaScript no HTML.
Meu código até agora se parece com o seguinte:
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;
}
E o HTML se parece com o seguinte:
<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>
O problema é que todo o documento.getElementById () chama Return null. Presumivelmente, porque eles não existem no momento em que o código é executado. Eu tentei colocar o código dentro de uma janela.onload = function () {}, mas a) que fica confuso e b) Eu teria que definir a função de atualização dentro de uma função, que não parece correta.
Alguém pode lançar alguma luz sobre isso? Existem regras gerais que podem me ajudar a entender como funciona? Ou alguma documentação sobre o assunto?
Editar: Código revisado:
<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>
Solução
Colocar o código em um manipulador para o evento Onload funciona muito bem e é amplamente aceito. O mesmo acontece com uma função em uma função (dependendo do motivo).
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');
}
Aqui está um Postagem do blog Por Dean Edwards sobre o uso de janela.onload
Outra opção é colocar seu JavaScript na parte inferior da página em vez de na parte superior.
Outras dicas
Como os outros disseram, você precisará envolver seu código dentro de uma função e chamá -lo da janela.onload.
Também Quando você atribui uma função a um evento, use apenas o nome (sem parênteses) ou a função é chamada ali e depois ..
assim
red.onchange = update();
deveria estar
red.onchange = update;