document.getElementById returning [object HTMLDivElement]

Question

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";
        };
    }

Don't cache navbarCollapsableVisibility or else you're assigning primitives, not references and nothing will happen. — Andrew Li
– Andrew Li, Commented Jun 9, 2017 at 18:20

Shadowfool · Accepted Answer · 2017-06-09 18:26:26Z

3

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.

edited Jun 9, 2017 at 18:26

answered Jun 9, 2017 at 18:24

Shadowfool

1,03612 silver badges21 bronze badges

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

3 Comments

apires Over a year ago

No problem, dude.

Ameed Aabidi Over a year ago

The element does exist and I've read that resource as well. But still no results...

Shadowfool Over a year ago

[object HTMLDivElement] is the representation of the Element Object that is being returned...

Ameed Aabidi · Accepted Answer · 2017-06-09 18:35:39Z

1

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";
        };
    }

answered Jun 9, 2017 at 18:35

Ameed Aabidi

1231 silver badge10 bronze badges

Collectives™ on Stack Overflow

document.getElementById returning [object HTMLDivElement]

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related