1

Пишу расширение для браузера 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 Не знаю почему

3
  • Пока что просто хочу, чтобы он мне написал "kek" в консоль, но так как кнопку он не видит, ничего не срабатывает Commented 23 янв. 2020 в 15:56
  • 1
    переместите <script src="popup.js"></script> вниз перед </body>
    – soledar10
    Commented 23 янв. 2020 в 16:03
  • 1
    Почему null? потому что, ваш скрипт срабатывает раньше, когда DOM еще не готов
    – soledar10
    Commented 23 янв. 2020 в 16:17

1 ответ 1

2

Как верно написал 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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