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>
Advertisement
Answer
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/