0

Сценарий находится во внешнем файле. Происходит ошибка

script.js:7 Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:7 (anonymous) @ script.js:7 load (async) (anonymous) @ script.js:1

js/script

window.addEventListener('load', function () {

 document.querySelector('#btn1').addEventListener('click', function () {
   location.href = "./2.html";
  });

 document.querySelector('#btn2').addEventListener('click', function () {
   location.href = "./1.html";
  });

});

1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>1</h1>
 <button id="btn1">go to 2</button>
</body>
 <script src="js/script.js"></script>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>2</h1>
 <button id="btn2">go to 1</button>
</body>
 <script src="js/script.js"></script>
</html>

Если сценарий вополнять в файлах ошибки не происходит.

1.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>1</h1>
 <button id="btn1">go to 2</button>
</body>
 <script>
  window.addEventListener('load', function () {

   document.querySelector('#btn1').addEventListener('click', function () {
    location.href = "./2.html";
   });

  });
 </script>
</html>

2.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>2</h1>
<button id="btn2">go to 1</button>
</body>
 <script>
  window.addEventListener('load', function () {

   document.querySelector('#btn2').addEventListener('click', function () {
    location.href = "./1.html";
   });

  });
 </script>
</html>

Не могу понять, подскажите. Спасибо.

1
  • Так а что Вас удивляет? Вы загружаете 1.html, в нем загружается ваш скрипт. Документ загружается, скрипт начинает работать. Находит btn1, назначает обработчик. Потом ищет btn2, чтобы тоже назначить обработчик. Но элемента btn2 в 1.html нет, вот и возникает ошибка.
    – Yaant
    6 июл 2018 в 10:37

1 ответ 1

2

Добавьте проверку наличия элемента, перед назначением обработчика.

window.addEventListener('load', function () {

 var btn1 = document.querySelector('#btn1');
 var btn2 = document.querySelector('#btn2');
  
  if (btn1) {
    btn1.addEventListener('click', function () {
      location.href = "./2.html";
    });
  }
  
  if (btn2) {
    btn2.addEventListener('click', function () {
      location.href = "./1.html";
    });
  }
});

1
  • Уважаемый Hikikomori! Большое Вам спасибо!
    – Anton
    6 июл 2018 в 10:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.