сценарий во внешнем файле

208

22 августа 2018, 16:30

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

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>

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

Answer 1

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

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"; 
    }); 
  } 
});