Как правильно ссылаться на элементы HTML через JavaScript? - PullRequest
Новая
       9

Как правильно ссылаться на элементы HTML через JavaScript?

1 голос
/ 15 января 2010

Я делаю палитру цветов, используя чистый JavaScript и HTML. Он состоит из трех элементов выбора HTML (выпадающих списков) и одного элемента div, цвет фона которого будет изменен 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 () возвращают ноль. Предположительно, потому что они не существуют во время выполнения кода. Я попытался поместить код в 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>

Ответы [ 2 ]

3 голосов
/ 15 января 2010

помещение кода в обработчик для события 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');
}

Вот сообщение в блоге Дина Эдвардса об использовании window.onload

Другой вариант - поместить ваш javascript внизу страницы, а не вверху.

2 голосов
/ 15 января 2010

Как говорили другие, вам нужно будет обернуть свой код внутри функции и вызвать его из события window.onload.

Также при назначении функции событию,используйте только имя (без скобок), или функция будет вызвана тут же, а затем ..

, поэтому 

red.onchange = update();

должно быть 

red.onchange = update;
...