Question

(index):1451 Uncaught TypeError: Cannot read property 'classList' of null
    at CommentStyle ((index):1451)
    at window.onload (waypoints.min.js?ver=4.0.2:1)

<script>
    function CommentStyle() {
        var elementAuthor = document.getElementById("author");
        var elementEmail = document.getElementById("email");
        var elementUrl = document.getElementById("url");
        elementAuthor.classList.add("form-control", "ulockd-form-bps", "required", "email");
        elementEmail.classList.add("form-control", "ulockd-form-bps", "required", "email");
        elementUrl.classList.add("form-control", "ulockd-form-bps", "required", "email");
    }
    window.onload = CommentStyle;
</script>
<style>
    .form-control {
        border: 1px dashed #cccccc;
    }
</style>

我只想向一些ID添加一些类。是的，现在，我的样式更好了，但也出现了控制台错误：（

Answer 1

在您的文档中，在DOM中，ID为“作者”和/或“电子邮件”和/或“ URL”的元素不存在。因此，elementAuthor，elementEmail或elementUrl为空，并且您无法访问空错误的classList属性，从而导致错误。

检查您的HTML中是否声明了带有缺失ID的元素。

Answer 2

正如我在另一个线程中所解释的那样，在运行时，此代码无法找到您要查找的元素ID。

请将此代码移至页面正文的最低点（即，在关闭</body>标签之前），以确保在元素准备就绪之前未执行该代码。

如果要在每个页面（包括没有这些元素的页面）上执行此代码，请尝试以下操作。请注意，尽管这些元素不存在，它也不会引发任何错误。

function CommentStyle() {
    var elementAuthor = document.getElementById("author");
    var elementEmail = document.getElementById("email");
    var elementUrl = document.getElementById("url");

    if (!elementAuthor || !elementEmail || !elementUrl)
        return;

    elementAuthor.classList.add("form-control", "ulockd-form-bps", "required", "email");
    elementEmail.classList.add("form-control", "ulockd-form-bps", "required", "email");
    elementUrl.classList.add("form-control", "ulockd-form-bps", "required", "email");
}

window.onload = CommentStyle;

无法读取null的属性“ classList” JS

2 个答案: