Форма не появляется при нажатии на кнопку JS

Рейтинг: 0Ответов: 1Опубликовано: 20.07.2023

Есть форма она находиться в файле .html

<form action="perem.php" method="POST" id="form"> 
<div>
  <label for="id">№ П/П:</label>
  <input type="number" id="id" name="id" required>
</div>
<div>
  <label for="N_m">Текст:</label>
  <input type="text" id="N_m" name="n_m" required>
</div>
<div>
  <label for="name">Текст:</label>
  <input type="text" id="name" name="name_m" required>
</div>
<div>
  <label for="Adr">Текст:</label>
  <input type="text" id="Adr" name="Adr_m">
</div>
<div>
  <label for="Full_name">Текст:</label>
  <input type="text" id="Full_name" name="direcor" required>
</div>
<div>
  <label for="Phone">Телефон:</label>
  <input type="tel" id="Phone" name="Phone_number" required>
</div>
<input type="submit" value="Отправить в БД">

В файле .html есть кнопка которая по идее должна её вызывать:

<input id="button" class="button" type='button' value='Добавить' onclick="addRow()">

С помощью скрипта .js

const button = document.querySelector('#button');
const form = document.querySelector('#form');

button.addEventListener('click', () => {
  form.classList.add('open');
});

Но вместо этого я получаю ошибку :

Cannot read properties of null (reading 'addEventListener')

Может я что-то не так сделал или ещё чего, не понимаю с чем может быть связана ошибка (Я новичок).

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Скорее всего надо дождаться загрузки страницы и только после этого вызывать функцию клика. Для этого можно воспользоваться событием DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
    ... тут код
});

т.к. изначально при вызове addEventListener на странице ещё не успел появится элемент button

Либо надо при подключении скрипта написать defer в его свойства, чтобы он подгружался позже

<script defer src="......."></script>
        ^^^^^