Not quite sure on your question - but I assume you want to display different elements on the page depending on what button is being clicked.
There are 4 elements to be hidden or displayed:
day
time
btn-on
btn-off
Assume the desired result when
btn-on clicked
day = display
time = display
btn-on = hidden
btn-off = display
btn-off clicked
day = hidden
time = hidden
btn-on = display
btn-off = hidden
Basically when the following elements are hidden, they are not being displayed again:
day
time
Lets step through what is going on.
Two css classes to deal with displaying and hiding elements:
.display-none
.display-block
(.display-block is not really required as adding or removing .display-none will do the same)
On page load the following is executed initialDefaults().
Via javascript the css class .display-none is being adding to btn-off element.
This can be done directly in html, initialDefaults() not required.
<button onclick="offBtn()" class="display-none" id="btn-off">Hide Day and Time</button>
Clicking btn-on:
starts off digitalClock() and onBtn
where onBtn:
btn-on = add display-none
btn-off = add display-block (note display-none is not being removed - was added onload)
day = not catered for but will get populated via call to digitalClock()
time = not caterd for but will get populated via call to digitalClock()
Note: digitalClock() will be called every time btn-on is clicked - should really only be called once
Clicking btn-off:
starts off offBtn
where offBtn:
btn-on = remove display-none
btn-off = remove display-block
day = add display-none
time = add display-none
So if only manipulating by adding or removing of display-none
btn-on clicked
day = display = remove display-none
time = display = remove display-none
btn-on = hidden = add display-none
btn-off = display = add display-none
btn-off clicked
day = hidden = add display-none
time = hidden = add display-none
btn-on = display = remove-display-none
btn-off = hidden = add display-none
Add class="display-none" to following elements at start:
day
time
btn-off
Hope that helps out
To help figure out what is going on in the browser with what classes being added to a specific element - you can use inspect element.
Chrome Inspect Element:
How To Use the Inspect Element Tool in Chrome - GreenGeeks[
^]