Как исправить «TypeError: X is null»

Я делаю небольшой сайт/сервер, где я могу отправить свое имя/фамилию/возраст и т. д. в файл php. моя проблема в том, что My JS не получает мой ввод из HTML, а затем не меняет PHP.

Точная ошибка: TypeError: firstName имеет значение null в Firefox.

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

<!DOCTYPE html>
<html>
  <head>
     <meta charset = "utf-8">
     <meta name = "Lucas" content = "Nothing important">
     <title>Ajax form_1</title>
  </head>
  <body>
     <h2>Form_2</h2>
     <form>
       <input type = "text"  name = "firstName" placeholder = "voornaam">
       <input type = "text"  name = "lastName" placeholder = "achternaam">
       <input type = "text"  name = "age" placeholder = "leeftijd">
       <input type = "text"  name = "email" placeholder = "email">
       <input type = "button" id = "submitButton" value = "submit">
     </form>
    <div id = "responseHere">Response comes here</div>
    <script src = "script.js"></script>
  </body>
</html>

let firstName = document.getElementById("firstName");
let lastName = document.getElementById("lastName");
let age = document.getElementById("age");
let email = document.getElementById("email");
let submitButton = document.getElementById("submitButton");
let responseHere = document.getElementById("responseHere");

submitButton.addEventListener('click', ajax);

function ajax(){
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
      responseHere.innerHTML = this.responseText;
  }
};
let httpString = "form_1.php?firstName = " + firstName.value + "&lastName = " + lastName.value + "&age = " + age.value + "&email = " + email.value;

console.info(httpString);

xmlhttp.open("GET", httpString, true);
xmlhttp.send();
}

    <?php
    $firstName = $_GET['firstName'];
    $lastName = $_GET['lastName']
    $age = $_GET['age'];
    $email = $_GET['email']
    echo "<h2>Response Demo Form</h2><h3>";
    echo "You submitted the following information<br><ul>";
    echo "<li>Name: <strong> $firstName $lastName</strong></li>";
    echo "<li>Age: $age</li>";
    echo "<li>Age: $email</li>";
    echo "</li></ul></h3>";
   ?>

Нет элемента с идентификатором firstName (ни lastName, age или email)

— 30.03.2019 14:18

javascript php html ajax xml

30.03.2019 14:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 953

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить уникальный атрибут id в html-код

 <form>
       <input type = "text" id='firstName'  name = "firstName" placeholder = "voornaam">
       <input type = "text" id='lastName'  name = "lastName" placeholder = "achternaam">
       <input type = "text" id='age' name = "age" placeholder = "leeftijd">
       <input type = "text" id='email' name = "email" placeholder = "email">
       <input type = "button" id = "submitButton" value = "submit">
     </form>

Спасибо, я идиот, что пропустил такую очевидную вещь! Но теперь я получаю сообщение об ошибке: «Ошибка синтаксического анализа xml, корневой элемент не найден»

— 30.03.2019 14:29

30.03.2019 14:25