Попытка отобразить предупреждение на странице параметров расширения Chrome, но получить «Невозможно установить свойство« innerHTML »из неопределенного» - PullRequest
Новая
       0

Попытка отобразить предупреждение на странице параметров расширения Chrome, но получить «Невозможно установить свойство« innerHTML »из неопределенного»

0 голосов
/ 12 августа 2011

Я пытаюсь отобразить маленькое окно статуса на странице настроек в моем расширении Chrome. Я пытаюсь следовать примеру в документации здесь .

Но я получаю исключение Uncaught TypeError: Cannot set property 'innerHTML' of undefined. В примере никогда не определяется объект состояния, но я такой нуб в javascript / html, что не знаю, есть ли что-то очевидное, чего мне не хватает Вот код для моей страницы настроек.

Во 2-й строке функции обратного вызова происходит ошибка. 

<script type="text/javascript" >
    function login(event){
                event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
            status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
</script>
<body>
<form>
Username: <input type="text" name="username" id="username" /> <br />
Password: <input type="password" name="password" id="password" /> <br />
<button onclick="login(event)">Login</button>
</form>
<div id="status"></div>
</body>

Ответы [ 3 ]

1 голос
/ 12 августа 2011

Поскольку вы отправляете form, страница перезагружается при нажатии Логин .Чтобы избежать этого, вы можете вызвать event.preventDefault () и передать событие в функцию login следующим образом: 

    <script type="text/javascript" >
    function login(event){
        event.preventDefault();
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        if(username.value != null && password.value != null) chrome.extension.getBackgroundPage().login(username, password, callback);
    }
    function callback(){
        var status = document.getElementById("status");
        status.innerHTML = "Now logged in";
        setTimeout(function(){
                status.innerHTML = "";
        }, 750);
    }
    </script>
    <body>
    <form>
    Username: <input type="text" name="username" id="username" /> <br />
    Password: <input type="password" name="password" id="password" /> <br />
    <button onclick="login(event)">Login</button>
    </form>
    <div id="status"></div>
    </body>

Это остановит отправку formи работает так, как вы ожидаете.

1 голос
/ 12 августа 2011

У вас нет HTML-элемента с идентификатором status, что вызывает ошибку, поскольку document.getElementById() возвращает null или undefined, когда не удается найти элемент.
Чтобы это исправить, просто добавьте элемент с идентификатором status. Ex. 

<button onclick="login()">Login</button>
</form>

<div id="status"></div>
</body>
0 голосов
/ 12 августа 2011

Я могу ошибаться, но у меня нет опыта работы с "chrome.extension".Если вы измените var status = document.getElementById("status"); status.innerHTML = "Now logged in";

на var status = window.document.getElementById("status"); status.innerHTML = "Now logged in";

Обратите внимание на добавленное «окно», возможно, обратный вызов пытается найти «chrome.extension.document» вместо «window.document»

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...