Why JS error in Opera extension console?

A

Artem Blinov2017-11-25 22:26:30

JavaScript

Artem Blinov, 2017-11-25 22:26:30

I develop extensions for Chrome (Opera and Yandex). There was an error in the console "Uncaught TypeError: Cannot set property 'onclick' of null"

Code with error in line

// When the popup HTML has loaded
window.addEventListener('load', function (evt) {
    var btnGetKeyWord = document.getElementById('btnGetKeyWord');
    var lblFeedback = document.getElementById('lblFeedback');
    var txtResult = document.getElementById('txtResult');
    var btnCopy = document.getElementById('btnCopy');

    // Get Keyword
    btnGetKeyWord.onclick = function () { // Error 
        chrome.tabs.getSelected(null, function (tab) {
            chrome.tabs.sendRequest(tab.id, { method: "getTag" }, function (response) {
                if (response == undefined || response.method !== "getTag" || response.data == '') {
                    lblFeedback.innerHTML = 'Ключевые слова не найденны =(.';
                    lblFeedback.className = "alert alert-danger";
                    return;
                }

                txtResult.innerHTML = response.data;
                lblFeedback.innerHTML = 'Найденно ' + response.count + ' ключевых слов.';
                lblFeedback.className = "alert alert-success";
            });
        });
    };
    // Function Copy
    btnCopy.onclick = function () {
        if (txtResult.innerHTML.indexOf('How to Use') !== -1) {
            lblFeedback.innerHTML = 'Active when keyword is detected.';
            lblFeedback.className = "alert alert-danger";
            return;
        }

        if (lblFeedback.innerHTML.indexOf('Copied') == -1 && lblFeedback.innerHTML.indexOf('Not found tag.') === -1) {
            lblFeedback.innerHTML = lblFeedback.innerHTML + ' Скопированно!!';
            lblFeedback.className = "alert alert-success";
        }

        txtResult.select();
        document.execCommand('copy');
    };

});

html popup

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
     <div style="width: 350px;" class="header"> <img class="logo" src="icon32.png" alt=""> <h4 class="name">KeyWords</h4>
    </div> 
    <br>
    <div id="lblFeedback"></div>
    <textarea id="txtResult" class="form-control" cols="10" rows="10" readonly></textarea>
    <br>
    <div>
      <button id="btnGetKeyWord" class="btn btn-success">Получить слова</button>
      <button id="btnCopy" class="btn btn-info">Скопировать слова</button>
 </div>
  <hr> 
    <center><a href="https://www.facebook.com/blinovapps/" target="_blank">Facebook</a> | <a href="https://vk.com/blinov_apps" target="_blank">Vkontakte</a></center>
  <script type="text/javascript" src="popup.js"></script>
</body>
</html>

How to decide?

Reply

Answer the question

In order to leave comments, you need to log in

0 answer(s)