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

I want to only add some class to some ID.Yes, now, I have better style but also I have a console error :(

Improve this question
0

2 Answers 2

Reset to default
2

As I explained in the other thread, at runtime, this code is not able to find the element IDs you are looking for.

Please move this code to the lowest point in the page body (i.e., before closing </body> tag) to ensure it is not executing before the elements are ready.

If you are executing this code on every page, including pages without these elements, try the following. Notice that it throws no errors despite these elements not being present.

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;

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

How can I write conditional JS code that check if the ID s exist or not to prevent the console error.I cant check it with backend language because the script is very complex
@Displayname I updated. If document.getElementById(id) is falsy, that means it doesn't exist.
Thanks, your code works for the IDs.However, when I try to add same classes to another ID, it doesnt work for the ID. I copied its js path : document.querySelector("#comment") There is no log in console about the comment id.What kind of thing cause this problem? The div doesnt get the classes.
1

In your document, in DOM, elements with ID "author" and/or "email" and/or "url" do not exists. Therefore, elementAuthor, elementEmail or elementUrl are null and you can't access classList property of a null error, hence the error.

Check in your HTML if you have declared elements with those missing IDs.

Improve this answer

3 Comments

How can I write conditional JS code that check if the ID s exist or not to prevent the console error.I cant check it with backend language because the script is very complex
You could use setTimeout recursively and checking inside the passed function if each document.getElementById is === undefined. But I don't really think this is what you want, it's bad practice. You should instead understand when those DOM elements exists (Directly in HTML, or a function that generates them) in your page and locate where to write the code that modifies classList accordingly. For example if you declared those directly in your HTML code, you just need to call CommentStyle in a script tag after them or at bottom of the page.
@FabioCrispino I only realized what was going on here because there would be no case where the elements don't exist when they should if the function is bound to onload, which by definition fires when the DOM is finished loading up. So what's happening here is OP is running this logic on every page, and he needs it to work when it can and go away when it can't. Not good engineering but just figured I'd share the tie-in with onload.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.