Uncaught TypeError: Невозможно установить свойство 'onclick' из null

У меня возникли проблемы с появлением моего окна предупреждения с помощью простого флажка, и я не могу понять, почему. Здесь основной Javascript и HTML:

var blue_box=document.getElementById("color-blue");
function colorFunction() {
    window.alert("This color is blue!");
}

blue_box.onclick=colorFunction;

<form action="" method="POST" id="form">
    <fieldset>
        <legend> Form!</legend>
        <ul>
            <li><label><input type="checkbox" 
                    name="color" 
                    value="blue" 
                    id="color-blue" />
                    blue</label>
                </li>
	        <li><label><input type="checkbox" 
                    name="color"  
                    value="red" 
                    id="color-red" />
                    red</label>
                </li>
		<li><label><input type="checkbox" 
                    name="color" 
                    value="yellow" 
                    id="color-yellow" />
                    yellow </label>
                </li>
            </ul>
        </fieldset>
    </form>

Ответ 1

Заменить код в

window.onload = function(){ 
    // your code 
};

Ответ 2

Попробуйте поместить все теги <script ...></script> перед тегом </body>. Возможно, js пытается получить доступ к объекту DOM до его создания.

Ответ 3

Итак, у меня была аналогичная проблема, и мне удалось ее решить, поместив тег script своим JS файлом после закрытия тега body.

Я предполагаю, потому что он уверен, что есть что-то для ссылки, но я не совсем уверен.

Ответ 4

"blue_box" - null - вы уверены, что все, что есть при "id='blue'" существует, когда это выполняется?

попробуйте console.log(document.getElementById("blue")) в хром или FF с помощью firebug. Ваш script может работать до того, как будет загружен элемент 'blue'. В этом случае вам нужно будет добавить событие после загрузки страницы (window.onload).

Ответ 5

Убедитесь, что ваш javascript выполняется после того, как ваш элемент загрузился, возможно, попробуйте поместить вызов js файла непосредственно перед тегом или использовать атрибут defer в вашем script, например: <script src="app.js" defer></script> это гарантирует что ваш script будет выполнен после загрузки dom.

Ответ 6

Существует ли document.getElementById( "синий" )? если он не будет, тогда blue_box будет равен нулю. вы не можете установить onclick на то, что null