выходит следующая ошибка: script.js:34 Uncaught TypeError: Cannot set properties of null (setting 'onclick') at script.js:34:14

Рейтинг: -1Ответов: 2Опубликовано: 14.07.2023

// ВВОД ПАРОЛЯ
const link = document.getElementById("myLink");
const passwordForm = document.getElementById("passwordForm");
const passwordInput = document.getElementById("password");
const submitButton = document.getElementById("submitPassword");

// Обработчик клика по ссылке
link.onclick = function() {
  passwordForm.style.display = "block";
};
// Обработчик клика по кнопке отправки пароля
submitButton.addEventListener("click", () => {
  const password = passwordInput.value;
  // Проверяем пароль
  if (password === "123") {
    // Если пароль верный, переходим на другую страницу
    window.location.href = "lectures.html";
  } else {
    // Если пароль неверный, выводим сообщение об ошибке
    alert("Неверный пароль!");
  }
});
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20rem;
  height: 20rem;
}

.form__group {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.form__button {
  height: 4rem;
  border: 0.2rem solid #af0f0f;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

.form__input {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  font-weight: 200;
  color: black;
  padding: 2rem;
  background: white;
  border: none;
  border-bottom: 0.3rem solid transparent;
  border-radius: 0.5rem;
  width: 100%;
  height: 2rem;
  position: relative;
  border: 0.2rem solid #af0f0f;
  z-index: 1;
}

.form__input:focus {
  outline: none;
  border-bottom: 0.5rem solid #66D763;
}

.form__input:focus:invalid {
  border-bottom: 0.5rem solid #D76363;
}

.form__label {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  display: block;
  transition: 0.5s all;
  background-color: black;
  color: white;
  border: 0.2rem solid #af0f0f;
  padding: 1rem 0;
}

.form__input:placeholder-shown+.form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3rem);
}
`<a class="main-menu__button main-menu__button_1" id="myLink" href="#">ЛЕКЦИИ</a>`
<form class="form" id="passwordForm" style="display: none">
  <div class="form__group">
    <input type="password" class="form__input" placeholder="введите пароль" id="password" required />
    <!-- подсказка в поле формы -->

    <label for="password" class="form__label">8 знаков (сегодня)
                        </label>
    <button class="form__button" type="button" id="submitPassword">
                            Отправить
                        </button>
  </div>
</form>

я сделал переход на другую страницу html после предъявления пароля (123), н моём сайте всё работает корректно, но в консоль выводится ошибка: Uncaught TypeError: Cannot set properties of null (setting 'onclick') at script.js:34:14 а на 34 строке у меня расположен следующий фрагмент: link.onclick = function () { passwordForm.style.display = "block"; }; вроде всё работает на ошибка не даёт покоя. Помогите пожалуйста!

Ответы

▲ 0

файл script.js должен отрабатывать после загрузки разметки. Для этого при его подключении прописывается defer.

<script src='script.js' defer> </script>
▲ 0

проблема заключалась вот в чём: у меня многостраничный сайт, на главной странице сначала появлялась форма ввода пароля, а после правильного ввода она исчезала (в него добавлялся display: none) и появлялось просто навигационное меню (из него удалялся display: none). Данное навигационное меню сконструировано было без применения js. С помощью этого меню осуществлялся переход на другие страницы, на которых был размещён контент и так же имелось навигационное меню, но уже выполненное в применением js(гамбургер). Так вот код этих 2-х конструкций (гамбургер и форма), у меня были прописан в одном js файле и подключён ко всем страницам. И когда я использовал код формы, js ругался что не может найти элементы гамбургера, а когда я использовал код на странице на которой есть только гамбургер js ругался что не может найти элементы формы. Когда я разделил эти два фрагмента кода по разным соответсвенно файлам js, ошибки исчезли.