'Javascript - Hide all elements that do not have the specified ID

Hey there StackOverflow Community!

I'm fairly new to Stack and coding in general so this code will probably have an obvious error that I can't figure out.

Basically, in the following code I want everything shown on screen that isn't the element with the id settings to be hidden.

if ((!"#settings").style.display === "block") {
        $(!"#settings").hide();
    }

HTML:

<body>
    <span id="mainBtnArea">
        <button id="settings-btn">Settings</button>
        <button id="stats-btn">Stats</button>
    </span>
    <div id="mainArea">
        <h1 id="clickHeader"></h1>
        <button id="main-btn">Click Me</button>
    </div>
    <div id="settings">
        <h1>this is the page I want to show</h1>
    </div>
    <div id="stats">
        <p id="stats-clicks" class="stats">Keys:</p>
        <p id="stats-keys" class="stats">Keys:</p>
    </div>
</body>

javascript

Solution 1:^[1]

    var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
    if (elements[i].id != 'settings') {
        elements[i].style.display = 'none';
    }
}

You need to have a forloop! Update: You have to add an element tag DIV in order for it to work. Please see above.

It works for me: https://jsfiddle.net/bowtiekreative/j697okqd/1/

Solution 2:^[2]

Query selectors don't work quite like that - you can't negate a selector with a ! symbol.

You can, however, use the visible selector and the not selector. The following will hide every element that is a child of body ($("body.find"), is a div or span (div, span), is visible (:visible), and doesn't have the id 'settings' (:not('#settings'))

 $("body").find("div:not('#settings'), span").hide()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Javascript - Hide all elements that do not have the specified ID

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]