Question

见下面是我的javascript，

<script type="text/javascript">
document.getElementById('auth').onclick=change;
function change(){
    this.className="account_holder";
}
</script>

html是

<td id="auth" class="authorised_reportericon" >
                        <a href="{% url incident.views.authorised_reporter %}">
                        <p align="center" style="color:black;font-size:16px;">Authorised Reporters</p></a>
                    </td>

我为onclick指定了td的id，但是因为Uncaught TypeError它是错误的错误：无法设置属性＆＃39; onclick＆＃39;为null

Answer 1

将document.getElementById('auth').onclick=change;放在window.onload内，例如：

window.onload = function () {
    document.getElementById('auth').onclick=change;
};

根据您收到的错误，我猜测您的Javascript是在呈现相关HTML之前执行的，这意味着找不到具有id“auth”的元素。将它放在整个DOM准备就绪的事件中应解决问题。

演示：Here

Answer 2

您很可能已将脚本放在文档的head中，这意味着它在呈现页面的其余部分之前正在运行。

相反，请将其移至body内部，最后移至收尾</body>标记之前。

<!doctype html>
<html>
    <head>
        <title>my page</title>
    </head>
    <body>

        <!-- your page content -->

        <!-- your script -->
        <script type="text/javascript">
        document.getElementById('auth').onclick=change;
        function change(){
            this.className="account_holder";
        }
        </script>
    </body>
</html>

现在，元素将在脚本运行之前可用。这是因为页面从上到下按顺序呈现，脚本在加载时会阻止呈现。

因此，当脚本处于头部时，它会阻止脚本下面的其余部分呈现，直到脚本完成，这意味着"auth"尚不存在。

使用脚本的这种定位技术，可以比等待window.onload事件更快地运行。

未捕获的TypeError：无法设置null onclick的属性'onclick'不起作用

2 个答案: