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>

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

kalabuni, ну а как же записывать коментарии в БД без формы?

Для вывода,конечно не нужно.но в скомпоновке надо.

Добавлено через 5 минут
Shakalaka, И еще.

вывод в модальное окно срабатывает ,а если использовать document.getElementById("myBlock").inner HTML=s;
то вывод в блок id="myBlock" не происходит,почему?

HTML5
1
2
3
4
5
6
7
<form>
    Name:<input  type="text" name="name"><br>
        <input type="submit" value="Send" onclick="myFunc(this.form)">
 
</form> 
 
<div id="myBlock"></div>

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>

@kalabuni · 07.09.2016, 14:54

запись комментариев -- это задача номер один
вывод комментарив с помощью аякса -- это задача номер два

назначение функции на событие onclick кнопки (то, с чего вы начали эту тему) -- это задача номер три
аякс -- это только задача номер два
не надо объединять все три задачи в одну и всю эту общую задачу именовать аяксом
научитесь отделять котлеты от мух

@TVPNERO · 07.09.2016, 15:03 **[ТС]**

Shakalaka, Я ошибся.метод document.getElementById("myBlock").inner HTML=s; работает

при клике мыши на кнопке формы появляется на доли секунды и потом тут же исчезает.Как сделать чтоб после нажатия все оставалось на месте?

Добавлено через 57 секунд
kalabuni, -а для чего нужна буква f в скобках?-> function myFunc (f)

@kalabuni · 07.09.2016, 15:10

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

при клике мыши на кнопке формы появляется на доли секунды и потом тут же исчезает.Как сделать чтоб после нажатия все оставалось на месте?

перечитайте вами написанное
что и где появляется, и что и где исчезает?
вот как бы нам догадаться -- что творится в вашей голове, когда вы здесь свои вопросы задаёте?

@Shakalaka · 07.09.2016, 15:14

при клике мыши на кнопке формы появляется на доли секунды и потом тут же исчезает.Как сделать чтоб после нажатия все оставалось на месте?

Вы нажимаете на кнопку сабмит тем самым вызываете вашу функцию myFunc а потом происходит действие по умолчанию - отправка формы, страница обновляется, всё исчезает. Я не понял зачем вам при этом форма, ибо обработчик клика можно повесить на любой элемент, например див

@TVPNERO · 07.09.2016, 15:20 **[ТС]**

Shakalaka, а спасибо,у меня ж кнопка сабмит--для отправки коментов в БД.

Добавлено через 4 минуты
Shakalaka, а как лучше прописать? чтоб и коменты добавлялись не снимая тип сабмит и аякс запрос оставить для вывода коментов?

сейчас это выглядит вот так..кусок кода

HTML5
1
2
3
4
5
6
7
8
    
<form>
    Name:<input  type="text" name="name"><br>
        <input type="submit" value="Send" onclick="myFunc(this.form)">
 
</form> 
 
<div id="myBlock" style="display:inline-block;width:400px;border:green solid"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
  
function myFunc (f)
    {
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.open("POST", "coment.php","true");
    xmlhttp.onreadystatechange=function()
        {
         if (xmlhttp.readyState == 4)
             {
////////////////////////////////////////////////////////////////// и так далее

[/HTML]

@Shakalaka · 07.09.2016, 15:45

TVPNERO, честно говоря, не очень понял что у вас происходит. Вы хотите одним кликом и добавлять комментарий и выводить его на странице? При этом у вас обработчик добавления в одном файле, а обработчик получения комментариев в другом? Не проще ли оба обработчика поместить в одном файле и дергать его аяксом?

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

Shakalaka, чтоб более понятно было кину целиком файл demo.php,в котором есть форма для добавления комментариев,в этом файле пхп код соединяется с БД и передает комментарии в БД.

А файл соment.php,имеет только одно предназначение --он извлекает из БД комментарии.И вот тут то аякс запрос из файла demo.php и выводит комментарии из файла соment.phр под своей хтмл формой.

код demo.php

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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> 
 
<div id="myBlock" style="display:inline-block;width:400px;border:green solid"></div>

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
<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>

HTML5
1
2
</body>
</html>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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;
  }
 
 if(!empty($name)){
 $query = "INSERT INTO `coment`(`name`,`data`) VALUES ('$name','$data')";
 
  $result = $db->query($query);}
   
?>

=======================

код файла 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
<title>coment.php</title>
 
<?php
// извлекаем коментарии из БД и в этом же файле их выводим
//потом эти коментарии будут запрошены аяксом
@$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(скрин прикрепляю)-- так как тип кнопки с type="button", то комvентарии из coment.php после нажатия на кнопке формы выводятся аякс запросом,но если захочу добавить комментарий в БД то придется менять тип кнопки на самбит и тогда аякс запрос не будет работать.

То есть мне нужно чтоб коменты добавлялись пхп кодом ,а извлекались-- из файла coment.php(который хранит уже комментарии из БД) аякс запрсом.

также прикрепляю файл--так выглядит файл coment.php(хранящий коменты БД).

@Shakalaka · 07.09.2016, 17:13

TVPNERO, вы слишком усложняете себе жизнь. При сабмите формы страница перезагрузится и соответственно все результаты работы вашего аякс запроса исчезнут. Вы можете добавлять комментарий аякс запросом без перезагрузки страницы и получать комментарии аякс запросом, можете объединить оба обработчика получение/добавление в один и обращаться к нему аяксом, можете поместить пхп код добавления/получения на одной странице и вообще обойтись без аякса, тогда имеет смысл использовать форму. Вам всего лишь нужно выбрать наиболее рациональный/подходящий вам вариант.

@TVPNERO · 07.09.2016, 18:24 **[ТС]**

Shakalaka,

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

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

Аякс может закинуть комментарии прямо в БД.А как это сделать?

Можете написать аякс код для добавления комментария в БД?

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	07.09.2016, 14:54
	запись комментариев -- это задача номер один вывод комментарив с помощью аякса -- это задача номер два назначение функции на событие onclick кнопки (то, с чего вы начали эту тему) -- это задача номер три аякс -- это только задача номер два не надо объединять все три задачи в одну и всю эту общую задачу именовать аяксом научитесь отделять котлеты от мух 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	07.09.2016, 15:03 [ТС]
	Shakalaka, Я ошибся.метод document.getElementById("myBlock").inner HTML=s; работает при клике мыши на кнопке формы появляется на доли секунды и потом тут же исчезает.Как сделать чтоб после нажатия все оставалось на месте? Добавлено через 57 секунд kalabuni, -а для чего нужна буква f в скобках?-> function myFunc (f) 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	07.09.2016, 15:45
	TVPNERO, честно говоря, не очень понял что у вас происходит. Вы хотите одним кликом и добавлять комментарий и выводить его на странице? При этом у вас обработчик добавления в одном файле, а обработчик получения комментариев в другом? Не проще ли оба обработчика поместить в одном файле и дергать его аяксом? 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	07.09.2016, 17:13
	TVPNERO, вы слишком усложняете себе жизнь. При сабмите формы страница перезагрузится и соответственно все результаты работы вашего аякс запроса исчезнут. Вы можете добавлять комментарий аякс запросом без перезагрузки страницы и получать комментарии аякс запросом, можете объединить оба обработчика получение/добавление в один и обращаться к нему аяксом, можете поместить пхп код добавления/получения на одной странице и вообще обойтись без аякса, тогда имеет смысл использовать форму. Вам всего лишь нужно выбрать наиболее рациональный/подходящий вам вариант. 0