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>
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()
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/