Cannot set property 'onclick' of null

@TVPNERO · Регистрация: 29.03.2016

Студворк — интернет-сервис помощи студентам

Почему возникает ошибка --Cannot set property 'onclick' of null на 18 строке ??

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8">
</head>
<body>
    
<form>
    Name:<input type="text" name="name"><br>
        <input type="button" value="Send">
 
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
  
var press=document.getElementById("button");
 
press.onclick=function(f)///////////////////////////// Это 18 строка .Тут возникает ошибка.
    {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "demo.php","true");
    xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
             var s=xmlhttp.responseText;
             // ну и далее делаете то, что вам нужно с полученным от сервера ответом
             alert(s); // например, выводите ответ в стандартном модальном окошке
            // document.getElementById('myBlock').innerHTML = s; // или помещаете ответ внутрь существующего на странице блока
           }
      
 
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          
        xmlhttp.send('name=' + f.name.value);
    
    }
  }
 
 
 
</script>

HTML5
1
2
</body>
</html>

@kalabuni · 06.09.2016, 14:05

ошибка возникает раньше, в строке var press=document.getElementById("button");
браузер пытается найти тег с id="button", но не находит его в уже прочитанном коде

@IamRain · 06.09.2016, 14:52

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

Почему возникает ошибка --Cannot set property 'onclick' of null на 18 строке ??

Потому что элемент с id="button" не найден. Раз ссылка ни на что не ссылается, то и обработчик привязать нельзя.

@TVPNERO · 06.09.2016, 15:58 **[ТС]**

kalabuni,IamRain, странно ведь,не понимаю.Скрипт же прописан до </body>,тогда почему не находит id="button".
Как исправить?

@kalabuni · 06.09.2016, 19:36

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

Скрипт же прописан до </body>,тогда почему не находит id="button".
Как исправить?

браузер прочитывает и отображает/исполняет код построчно, сверху вниз

у вас в коде
<script>var press=document.getElementById("button");</script>
прописано выше, чем
<тег id="button"></тег>

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

Как исправить?

-- либо сделать наоборот: сначала HTML-код тега, затем скриптовой блок, где используется id этого тега

-- либо оставить скриптовой блок в заголовке документа, но javascript-код внутри него "обернуть" в функцию, запускаемую по событию onload

@BANO · 06.09.2016, 19:39

Не по теме:

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

-- либо сделать наоборот: сначала HTML-код тега, затем скриптовой код
-- либо оставить как есть, но javascript-код, где упоминается button надо обернуть в функцию, запускаемую по событию onload

либо поискать по форуму, потому что эта ошибка уже 1000 раз спрашивалась и 1000 раз исправлялась

@IamRain · 06.09.2016, 19:40

kalabuni, проблема всего лишь в том, что нету элемента с таким id.

@kalabuni · 06.09.2016, 19:44

-

Не по теме:

BANO, нескромный вопрос -- как вы, будучи модератором, умудрились стать нарушителем?

@BANO · 06.09.2016, 19:59

Не по теме:

kalabuni, модератором я уже давно не являюсь, а нарушителем я стал благодаря своему мнению и своей манере речи.

@TVPNERO · 06.09.2016, 20:59 **[ТС]**

смешно аж.как же я не заметил что id не определил.впрочем хоть ошибка исправлена ,но аджакс запрос по прежнему не работает.

@kalabuni · 06.09.2016, 23:30

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

но аджакс запрос по прежнему не работает.

порекомендую вам набрать в гугле запрос "футбольный клуб Аякс, Амстердам" -- в серпе вы увидите, что по-английски этот клуб называется Аjax -- точно также, как и web-технология. которую вы уже долгое время не можете понять, но по-русски англоязычная платформа Гугль рекомендует называть его именно Аякс, но никак не ~~Аджакс~~
по сути:
постарайтесь всё же понять -- ваш файл demo.php, как вы сами выше написали, изначально выводил на страницу
и какой-то заголовок для вашей страницы, и форму для написания юзером комментария, и ранее написанные комментарии
сейчас же, когда для выводов комментария вы хотите использовать аякс, вам нужен ещё один (совсем другой!) PHP-файл, который будет выводить на страницу только комментарии (и более ничего!)
так что сначала сделайте именно такой PHP-файл и проверьте его работу -- пусть он выдаёт на страницу пусть даже неотформатированные комментарии, в любом виде
и только потом приходите сюда, поможем с аяксом

@TVPNERO · 07.09.2016, 11:42 **[ТС]**

kalabuni, хорошо.спасибо за разьяснение.попробую

Добавлено через 5 часов 15 минут
kalabuni, написал я пхп файл где только извлекаются коментарии и больше ничего это файл coment.php

вот код

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
 
$name=$_POST['name'];
 
$data=date("Y-m-d H:i:s");
 
 
@$db = new mysqli('localhost','root', '1412','demo');
  if (mysqli_connect_errno()) {
     echo "Ошибка: Не удалось установить соединение" . 
          " с базой данных. Повторите попытку позже.";
     exit;
  }
 
 
  $query ="select name from coment order by data desc"; 
           
  $result = $db->query($query);
 
  $num_results=$result->num_rows;
 
  echo "Всего коментариев ".$num_results; 
echo '<br>';
   for ($i = 0; $i < $num_results; $i++) {
     $row = $result->fetch_assoc();
       echo htmlspecialchars (stripslashes($row['name'])); echo'<br>';
     
  }
  $result->free();
  $db->close();
 
?>

А это файл demo.php где есть форма для добавления коментов и код аякс запроса(который даже после прописания

PHP
1
xmlhttp.open("POST", "coment.php","true");

все равно не работает).

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8">
</head>
<body>
    
<form>
    Name:<input type="text" name="name"><br>
        <input type="button" value="Send" onclick="myFunc(this.form)">
 
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
  
function myFunc (f)
    {
    var xmlhttp =new XMLHttpRequest();
    xmlhttp.open("POST", "coment.php","true");
    xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
             var s=xmlhttp.responseText;
             // ну и далее делаете то, что вам нужно с полученным от сервера ответом
             alert(s); // например, выводите ответ в стандартном модальном окошке
            // document.getElementById('myBlock').innerHTML = s; // или помещаете ответ внутрь существующего на странице блока
           }
      
 
      xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          
        xmlhttp.send('name=' + f.name.value);
    
    }
  }
</script>

</body>
</html>

@TVPNERO · 07.09.2016, 11:47 **[ТС]**

скрин coment.php

@kalabuni · 07.09.2016, 12:31

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

написал я пхп файл где только извлекаются коментарии и больше ничего это файл coment.php

1. вот объясните -- зачем в этом файле вам нужна переменная $name?
её значение вы извлекаете из переменной окружения $_POST в самой первой строке вашего файла, а далее она у вас нигде не используется
так нафиг вам вообще отсылать файлу coment.php методом POST со страницы пару name=значение, если эта пара вам вообще не нужна?
Для красоты?
поймите, наконец -- в программировании каждая инструкция и каждый символ что-то конкретно означают и программист должен понимать -- для чего он пишет ту или иную буквочку

2. вы работоспособность файла проверяли?
просто запустите его в браузере, прописав URL файла в адресной строке -- что он вам выдаст на страницу?
если бы переменная $name вам была бы нужна, то перед проверкой работоспособности вам надо было закомментировать первую строку и следом просто прописать $name = 'чего-то нужное';?
но так как $name у вас просто "для красоты", то перед проверкой можете ничего не менять

@TVPNERO · 07.09.2016, 13:25 **[ТС]**

kalabuni, в файле coment.php переменная $name действительно не нужна,забыл стереть.

Впрочем файл все равно работоспособен и консоль разработчика не указывает на шибки.
На странице coment.php выводятся комментарии (в предыдущем посте прикрепил скрин--там 37 комментариев.)

Но в файле demo.php аякс запрос все еще не работает.

@kalabuni · 07.09.2016, 14:19

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

в файле coment.php переменная $name действительно не нужна,забыл стереть.

ну раз она не нужна, то и на странице, которая вызывает файл coment.php, совершенно не нужны ни форма, ни метод POST -- в методе open () достаточно просто указать имя файла и использовать метод GET
и вообще, вы с каким-то "придыханием" относитесь к аяксу -- считаете его чуть ли не волшебством
на самом деле всё просто -- весь вывод, который у вас сейчас отображается на странице (скан которой вы выложили), будет передан не для отображения, а в переменную в виде строки символов
пока вы это моё утверждение не поймёте и не прочувствуете, вам вовсе не стоит этим заниматься

@TVPNERO · 07.09.2016, 14:34 **[ТС]**

kalabuni, попробовал использовать GET.получилось.

то что вводится в поле формы отображается в URL как например--http://localhost/proba/demo.php?name=excelent+coment/

но почему же не срабатывает алерт ?

JavaScript
1
2
3
4
5
6
7
8
9
xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
             var s=xmlhttp.responseText;
             // ну и далее делаете то, что вам нужно с полученным от сервера ответом
             alert(s); // например, выводите ответ в стандартном модальном окошке
            // document.getElementById('myBlock').innerHTML = s; // или помещаете ответ внутрь существующего на странице блока
           }

и почему используется только то что введено в поле,почему не берутся данные с coment.php?

Так сейчас выглядит код demo.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8">
</head>
<body>
    
<form>
    Name:<input  type="text" name="name"><br>
        <input type="submit" value="Send" onclick="myFunc(this.form)">
 
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
  
function myFunc (f)
    {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET", "coment.php","true");
    xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
             var s=xmlhttp.responseText;
             // ну и далее делаете то, что вам нужно с полученным от сервера ответом
             alert(s); // например, выводите ответ в стандартном модальном окошке
            // document.getElementById('myBlock').innerHTML = s; // или помещаете ответ внутрь существующего на странице блока
           }
      
 
      
          
        xmlhttp.send('name=' + f.name.value);
    
    }
  }
 
 
 
</script>

</body>
</html>[/HTML]

Добавлено через 3 минуты
а хотя нет .даже при методе POST пишет то что введено через инпут в url.

@Shakalaka · 07.09.2016, 14:36

TVPNERO,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
  
function myFunc (f)
    {
    var xmlhttp =new XMLHttpRequest();
    xmlhttp.open("POST", "coment.php","true");
    xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
             var s=xmlhttp.responseText;
             // ну и далее делаете то, что вам нужно с полученным от сервера ответом
             alert(s); // например, выводите ответ в стандартном модальном окошке
            // document.getElementById('myBlock').innerHTML = s; // или помещаете ответ внутрь существующего на странице блока
           }
      
 
      
    
    }
//вот так
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          
        xmlhttp.send('name=' + f.name.value);
  }
</script>

@TVPNERO · 07.09.2016, 14:40 **[ТС]**

Shakalaka, Огромное спасибо.Получилось.

нужны некоторые пояснения--а для чего нужна буква f в скобках?-> function myFunc (f)

@kalabuni · 07.09.2016, 14:43

какая форма, какое поле?
вы вообще о чём?
не нужны вам -- для реализации ajax'a ни форма, ни поле в ней, вам совершенно не нужны!
в буквочке f функции при её вызове передавалась форма (как js-объект) --а теперь, вам, как выснилось, форма нафиг не нужна

вы "очень трудный" -- это я ласково, чтобы вас не обидеть

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Cannot set property 'onclick' of null

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	06.09.2016, 14:05
	Сообщение было отмечено TVPNERO как решение Решение ошибка возникает раньше, в строке var press=document.getElementById("button"); браузер пытается найти тег с id="button", но не находит его в уже прочитанном коде 1

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	06.09.2016, 15:58 [ТС]
	kalabuni,IamRain, странно ведь,не понимаю.Скрипт же прописан до </body>,тогда почему не находит id="button". Как исправить? 0

@IamRain 4694 / 2702 / 734 Регистрация: 02.08.2011 Сообщений: 7,228
	06.09.2016, 19:40
	kalabuni, проблема всего лишь в том, что нету элемента с таким id. 1

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	06.09.2016, 19:44
	- Не по теме: BANO, нескромный вопрос -- как вы, будучи модератором, умудрились стать нарушителем? 0

@BANO
	06.09.2016, 19:59
	Не по теме: kalabuni, модератором я уже давно не являюсь, а нарушителем я стал благодаря своему мнению и своей манере речи. 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	06.09.2016, 20:59 [ТС]
	смешно аж.как же я не заметил что id не определил.впрочем хоть ошибка исправлена ,но аджакс запрос по прежнему не работает. 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	07.09.2016, 11:47 [ТС]
	скрин coment.php Миниатюры 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	07.09.2016, 13:25 [ТС]
	kalabuni, в файле coment.php переменная $name действительно не нужна,забыл стереть. Впрочем файл все равно работоспособен и консоль разработчика не указывает на шибки. На странице coment.php выводятся комментарии (в предыдущем посте прикрепил скрин--там 37 комментариев.) Но в файле demo.php аякс запрос все еще не работает. 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	07.09.2016, 14:40 [ТС]
	Shakalaka, Огромное спасибо.Получилось. нужны некоторые пояснения--а для чего нужна буква f в скобках?-> function myFunc (f) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.09.2016, 14:43
	какая форма, какое поле? вы вообще о чём? не нужны вам -- для реализации ajax'a ни форма, ни поле в ней, вам совершенно не нужны! в буквочке f функции при её вызове передавалась форма (как js-объект) --а теперь, вам, как выснилось, форма нафиг не нужна вы "очень трудный" -- это я ласково, чтобы вас не обидеть 0