Cannot read property 'className'

Question

I'm working on WordPress and Javascript, I want to add a class when you click on the button to show and hide the menu.

This is the html:

<span class="menurwd" id="menurwd"></span>
<ul id="menu-principal" class="menu">
<li>Item</li>
<li>Item</li>
</ul>

the script:

(function() {

    var x = document.getElementById("menu-principal");
    document.getElementById("menurwd").onclick = function activeRwd(){
            if(x.className === "menu"){
                x.className += " active";
            }else{
                x.className = "menu";
            }
        }

})();

In the local installation if it works, but at the time of publishing it generates this error

Thanks @santosh, I also work in local installation, but when I pass it to the server it does not — DCdesign, May 08 '17 at 17:05
Then it must be conflicting with other code. Can you post your whole code in fiddle or code snippet of stackoverflow? — Santosh, May 08 '17 at 17:06
@Santosh this is url: http://www.ucatolica.edu.co/portaleng/ — DCdesign, May 08 '17 at 17:12
@DCdesign I see the id to be `menu-menu-principal` and not `menu-principal` as mentioned in question — Santosh, May 08 '17 at 17:17
Clear! In the local installation the Id is different for that error, Grande @Santosh — DCdesign, May 08 '17 at 17:21

score 0 · Answer 1 · answered May 08 '17 at 16:47

The error most likely actually says: "Cannot read property className of null". Which means that x is not pointing to anything. Make sure your JavaScript is moved to just before the body element is closed (</body>) so that by the time the parser encounters the script, the HTML will already have been parsed.

Cannot read property 'className'

1 Answers1