Fatal编程技术网
  • javascript/
  • Javascript 试图在Chrome扩展选项页面中显示警报，但得到；无法设置属性'；innerHTML'；“未定义”的定义；

Javascript 试图在Chrome扩展选项页面中显示警报，但得到；无法设置属性'；innerHTML'；“未定义”的定义；

javascript google-chrome-extension

Javascript 试图在Chrome扩展选项页面中显示警报，但得到；无法设置属性'；innerHTML'；“未定义”的定义；,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我试图在我的chrome扩展的选项页面中显示一个小状态框。我正试图遵循文档中的示例 但是我得到一个异常未捕获的TypeError:无法设置未定义的属性'innerHTML'。这个示例从未定义状态对象，但我对javascript/html非常在行，不知道是否有明显的遗漏。这是我的选项页面的代码 回调函数的第2行出现错误 <script type="text/javascript" > function login(event){ event.pr

我试图在我的chrome扩展的选项页面中显示一个小状态框。我正试图遵循文档中的示例

但是我得到一个异常
未捕获的TypeError:无法设置未定义的属性'innerHTML'。这个示例从未定义状态对象，但我对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>




函数登录（事件）{
event.preventDefault（）；
var username=document.getElementById（“用户名”）；
var password=document.getElementById（“密码”）；
if（username.value！=null&&password.value！=null）chrome.extension.getBackgroundPage（）.login（用户名、密码、回调）；
}
函数回调（）{
状态=document.getElementById（“状态”）；
status.innerHTML=“现在已登录”；
setTimeout（函数（）{
status.innerHTML=“”；
}, 750);
}
用户名：

密码：

登录

您没有id为
status
的HTML元素，这会导致错误，因为
document.getElementById（）
在找不到元素时返回
null
或
未定义的
。

要修复它，只需添加一个id为
status
的元素。
前


登录

我可能不正确，但我对“chrome.extension”没有任何经验。如果你改变

var status=document.getElementById（“status”）；
status.innerHTML=“现在已登录”；


进入
var status=window.document.getElementById（“状态”）；
status.innerHTML=“现在已登录”；



请注意添加的“窗口”，可能回调尝试搜索“chrome.extension.document”而不是“window.document”？
因为您正在提交
表单，所以当您单击“登录”时，页面正在重新加载。为了避免这种情况，您可以调用事件并将其传递到
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>




函数登录（事件）{
event.preventDefault（）；
var username=document.getElementById（“用户名”）；
var password=document.getElementById（“密码”）；
if（username.value！=null&&password.value！=null）chrome.extension.getBackgroundPage（）.login（用户名、密码、回调）；
}
函数回调（）{
var status=document.getElementById（“状态”）；
status.innerHTML=“现在已登录”；
setTimeout（函数（）{
status.innerHTML=“”；
}, 750);
}
用户名：

密码：

登录



这将阻止
表单
提交，并按照您的预期工作。
您能否更新您的代码以包含Digital Plane建议的添加内容，以便我们可以尝试找出它仍然不工作的原因。@Alasdair我更新了上面的代码谢谢今晚我将尝试一下！不再出现错误，但也不会在任何地方显示任何文本。好的，我错过了状态上的“var”，谢谢你的帮助，它工作正常！没问题。我很高兴这有帮助。

    <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>