JS ругается на события - JavaScript, Ajax

Ale}{ander · 15.04.2014, 17:57

При объявлении событий таким методом:

Код:

document.getElementById('screen').onclick = function() {
}

в консоли получаю такие ошибки:

FF: TypeError: document.getElementById(...) is null
Chrome: Uncaught TypeError: Cannot set property 'onclick' of null

При этом элемент с таким id есть на странице.
Что не так?

TranceSmile · 15.04.2014, 18:43

Загуглите о событияв в js. Так события не вешаютя на элемент.

ATL · 15.04.2014, 20:59

Почему же? Вешаются.
Скорее всего, у Вас проблема с элементом: либо ID не правильно указан, либо документ не готов. Попробуйте вставить этот код в конец страницы, после загрузки.

PS: Если будете использовать jQuery - всё будет просто и очевидно:

PHP код:


			
$(document).ready(function () {

    // документ готов, делаем что угодно



    $('#screen').on('click', function () {

        // кнопка с id=screen нажата

    });

});

Ale}{ander · 15.04.2014, 21:33

Цитата:

Сообщение от TranceSmile

Загуглите о событияв в js. Так события не вешаютя на элемент.

так с гугла и брал, при чем та где брал всё работает.

Цитата:

Сообщение от ATL

Почему же? Вешаются.
Скорее всего, у Вас проблема с элементом: либо ID не правильно указан, либо документ не готов. Попробуйте вставить этот код в конец страницы, после загрузки.

PS: Если будете использовать jQuery - всё будет просто и очевидно:

PHP код:


			
$(document).ready(function () {
    // документ готов, делаем что угодно

    $('#screen').on('click', function () {
        // кнопка с id=screen нажата
    });
});

с jQ работает, но не хотелось бы вешать библиотеки из-за таких мелочей. Как-то же оно должно работать на чистом javascript. При чем я копирую рабочий код с чужых сайтов, у них работает, у меня нет((( Мистика какая-то

P.s: на http://jsfiddle.net/ моя страничка без проблем работает

TranceSmile · 15.04.2014, 22:01

Выложите пожалуйста весь код страницы. ATL, спасибо, мне нужно значит обновить свои знания.

Ale}{ander · 15.04.2014, 22:18

HTML

Код:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="javascript/script.js"></script>
</head>
<body>
	<div id="screen">
		<div id="icon_list"></div>
	</div>
</body>
</html>

JS

Код:

function menu()
{
	document.getElementById('visible').style.display = 'block';
	document.getElementById('start_menu').style.display = 'block';
}

function visible()
{
	document.getElementById('visible').style.display = 'none';
	document.getElementById('start_menu').style.display = 'none';
}

function app_run()
{
	document.getElementById('screen').innerHTML = document.getElementById('screen').innerHTML + '<div class="app"><div class="bar"></div><div class="frame"></div></div>';
}

document.getElementById('screen').onclick = function() {
    alert('Hello world');
}

CSS

Код:

#screen
{
width: 100%;
height: 100%;
}

ATL · 15.04.2014, 22:47

TranceSmile, не стоит, нативный JS нынче не в тренде

Ale}{ander, после кода:

Код HTML:

	<div id="screen">
		<div id="icon_list"></div>
	</div>

Добавьте:

Код HTML:

<SCRIPT>
document.getElementById('screen').onclick = function() {
    alert('Hello world');
}
</SCRIPT>

И добавьте текст в DIV, а то по пустоте кликнуть будет непросто)

TranceSmile · 15.04.2014, 22:48

Код:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="javascript/script.js"></script>
</head>
<body>
	<div id="screen">
		<div id="icon_list"></div>
	</div>
<script>
document.getElementById('screen').onclick = function() {
    alert('Hello world');
}
</script>
</body>
</html>

Попробуйте так.

Ale}{ander · 15.04.2014, 22:56

Цитата:

Сообщение от ATL

TranceSmile, не стоит, нативный JS нынче не в тренде

Ale}{ander, после кода:

Код HTML:

	<div id="screen">
		<div id="icon_list"></div>
	</div>

Добавьте:

Код HTML:

<SCRIPT>
document.getElementById('screen').onclick = function() {
    alert('Hello world');
}
</SCRIPT>

И добавьте текст в DIV, а то по пустоте кликнуть будет непросто)

так работает, получается, что проблема в том что я js в отдельный файл выносил.

Спасибо, помогли.

P.s. там не пустота css width: 100%; height: 100%;

TranceSmile · 15.04.2014, 23:04

Не работало потому что обработчик события пытался повесится на элемент который еще был не создан

15.04.2014, 17:57	#1
Ale}{ander Пользователь Регистрация: 17.07.2013 Сообщений: 92	JS ругается на события При объявлении событий таким методом: Код: `document.getElementById('screen').onclick = function() { }` в консоли получаю такие ошибки: FF: TypeError: document.getElementById(...) is null Chrome: Uncaught TypeError: Cannot set property 'onclick' of null При этом элемент с таким id есть на странице. Что не так?

15.04.2014, 18:43	#2
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Загуглите о событияв в js. Так события не вешаютя на элемент. Самый перспективный framework Yii (c)

15.04.2014, 20:59	#3
ATL Форумчанин Регистрация: 26.01.2007 Сообщений: 278	Почему же? Вешаются. Скорее всего, у Вас проблема с элементом: либо ID не правильно указан, либо документ не готов. Попробуйте вставить этот код в конец страницы, после загрузки. PS: Если будете использовать jQuery - всё будет просто и очевидно: PHP код: `$(document).ready(function () { // документ готов, делаем что угодно $('#screen').on('click', function () { // кнопка с id=screen нажата }); });` Последний раз редактировалось ATL; 15.04.2014 в 21:07.

15.04.2014, 22:01	#5
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Выложите пожалуйста весь код страницы. ATL, спасибо, мне нужно значит обновить свои знания. Самый перспективный framework Yii (c)

15.04.2014, 22:47	#7
ATL Форумчанин Регистрация: 26.01.2007 Сообщений: 278	TranceSmile, не стоит, нативный JS нынче не в тренде Ale}{ander, после кода: Код HTML: <div id="screen"> <div id="icon_list"></div> </div> Добавьте: Код HTML: <SCRIPT> document.getElementById('screen').onclick = function() { alert('Hello world'); } </SCRIPT> И добавьте текст в DIV, а то по пустоте кликнуть будет непросто)

15.04.2014, 23:04	#10
TranceSmile Смайлик :) Форумчанин Регистрация: 12.12.2010 Сообщений: 445	Не работало потому что обработчик события пытался повесится на элемент который еще был не создан Самый перспективный framework Yii (c)

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Ругается на $this	CeHTuJI	PHP	7	15.10.2013 18:42
компилятор ругается	novak3	Общие вопросы C/C++	4	21.05.2011 01:58
Ругается компилятор..	CormiX	Помощь студентам	0	14.05.2011 16:13
Ругается касперский	Nexus2116	Общие вопросы Delphi	6	10.11.2010 06:49
События в WPF. Обращение к компонентам формы из события	Casper-SC	Общие вопросы .NET	3	25.07.2010 19:03