CODEWITHSUNDEEP
javascripthtmlcss
Ameed Aabidi
Ameed Aabidi

Reputation: 123

document.getElementById returning [object HTMLDivElement]

I'm trying to develop some script which toggles the display property of the css linked to my HTML document. This is in order to show/hide the navbar in the document. But when I run this script, the console shows [object HTMLDivElement] for the document.getElementById which is really confusing.

I don't think this is that of a big deal, but my head is kinda cloudy now...

        function navbarCollapse() {
        var navbarCollapsable = document.getElementById('nav-collapsable');

        var navbarCollapsableVisibility = navbarCollapsable.style.display;
        var invisible = "none";

        if (navbarCollapsableVisibility !== invisible) {
            navbarCollapsableVisibility = invisible;
        } else {
            navbarCollapsableVisibility = "block";
        };
    }

Upvotes: 0

Views: 2854

Answers (2)

Ameed Aabidi
Ameed Aabidi

Reputation: 123

Just solved it. As @AronF pointed out, [object HTMLDivElement] is what I'm supposed to be seeing. The issue was that I should not have been storing the navbarCollapsable.style.display in a var for some reason. Did this and got through:

function navbarCollapse() {
        var navbarCollapsable = document.getElementById('nav-collapsable');

        if (navbarCollapsable.style.display !== "none") {
            navbarCollapsable.style.display = "none";
        } else {
            navbarCollapsable.style.display = "block";
        };
    }

Upvotes: 1

Shadowfool
Shadowfool

Reputation: 1036

This is what should be returned. Please refer to MDN's docs for document.getElementById:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Return Value

element

is a reference to an Element object, or null if an element with the specified ID is not in the document.

Upvotes: 3

Related Questions