document.getElementById возвращает null

150

07 марта 2022, 04:10

Пишу расширение для браузера popup.js

var checkPageButton = document.getElementById('next_site');
checkPageButton.on("click", function() {
    console.log('kek');
});

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <title>Расширение</title>
  <script src="popup.js"></script>
</head>
<body>
<div class="modal-header">
    <h1 class="logo">
      <img class="logo-icon" src="icon.png">  Helper
      <span class="version">(1.0.0)</span>
   </h1>
</div>
<div class="main">
  <!-- Тут будет теловсех скриптов и тп -->
</div>
<div class="footer">
 <!-- Кнопка перехода на след. сайт -->
<button id="next_site">
  <label>Перейти на след.сайт</label>
</button>
</div>  
</body>
</html>

Ошибка заключается в том, что var CheckPageButton возвращает null Не знаю почему

Answer 1

Как верно написал soledar10 - Вам необходимо либо перенести Ваш скрипт вниз, либо поставить проверку загрузки документа.
Так же использование кнопка.on("click", function() {} относится к jquery У Вас в коде не подключена данная библиотека. Подключить её можно прописав в head <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
В javascript Вы можете использовать кнопка.onclick = function(){код} либо кнопка.addEventListener('click', function() {код});

Вот пример:

    window.onload = function() { 
        var checkPageButton = document.getElementById('next_site'); 
 
        checkPageButton.onclick = function () { 
            console.log('kek'); 
        } 
    };

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
          crossorigin="anonymous"> 
    <title>Расширение</title> 
    <script src="popup.js"></script> 
</head> 
<body> 
<div class="modal-header"> 
    <h1 class="logo"> 
        <img class="logo-icon" src="icon.png">  Helper 
        <span class="version">(1.0.0)</span> 
    </h1> 
</div> 
 
<div class="main"> 
    <!-- Тут будет теловсех скриптов и тп --> 
</div> 
 
<div class="footer"> 
    <!-- Кнопка перехода на след. сайт --> 
 
    <button id="next_site"> 
        <label>Перейти на след.сайт</label> 
    </button> 
 
</div> 
</body> 
 
</html>