2

见下文是我的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，但由于未捕获 TypeError：无法设置属性 'onclick' 为 null

4

2 回答 2

10

放在document.getElementById('auth').onclick=change;里面window.onload，比如：

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

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

演示：这里

于 2013-04-25T19:15:27.800 回答
3

很可能您已将脚本放置在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事件快得多。

于 2013-04-25T19:16:27.197 回答