Html button is not working as it is supposed to work every individual time.

Question

0.00/5 (No votes)

See more:

Quote:
I’m writing a code to create a digital clock. I’ve written HTML, CSS, and JS to create the clock. Everything is working fine until I click on the button that says, “Show Time and Date” which then displays the time and date, hide the button itself, displays the button that says, “Hide Time and Date” and then click on the button that says, “Hide Time and Date” which then hides the displayed time and date, the button itself and display back the button that says, “Show Time and Date”. The problem occurs after all this happens. The button that says, “Show Time and Date” is no more working now as it was before.

Below is the complete file code that includes Html and internal CSS and JavaScript.

What I have tried:

<!-- Write a JavaScript program to display 
the current day and time in the following format.
Sample Output : Today is : Tuesday.
Current time is : 10 PM : 30 : 38 -->

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <style>
    .display-none {
      display: none;
    }
    .display-block {
      display: block;
    }
  </style>

  <body onload="initialDefaults()">
    <p id="day"></p>
    <p id="time"></p>
    <button onclick="digitalClock(), onBtn()" id="btn-on">
      Show Day and Time
    </button>
    <button onclick="offBtn()" id="btn-off">Hide Day and Time</button>
  </body>

  <script>
    let initialDefaults = () => {
      let btnOff = document.getElementById("btn-off");
      btnOff.classList.add("display-none"); // Hides the button on pageload that says, "Hide Day and Time", by adding "display-none" class to it
    };

    let onBtn = () => {
      let btnOn = document.getElementById("btn-on");
      btnOn.classList.add("display-none"); // Hides the button that says, "Show Day and Time", by adding "display-none" class to it

      let btnOff = document.getElementById("btn-off");
      btnOff.classList.add("display-block"); // Displays the button that says, "Hide Day and Time", by adding "display-block" class to it
    };

    let offBtn = () => {
      let btnOn = document.getElementById("btn-on");
      btnOn.classList.remove("display-none"); // Displays the button that says, "Show Day and Time", by removing "display-none" class from it

      let btnOff = document.getElementById("btn-off");
      btnOff.classList.remove("display-block"); // Hides the button that says, "Hide Day and Time", by removing "display-block" class from it

      let dayId = document.getElementById("day");
      dayId.classList.add("display-none"); // Hides the p tag that display day, by adding "display-none" class to it

      let timeId = document.getElementById("time");
      timeId.classList.add("display-none"); // Hides the p tag that display time, by adding "display-none" class to it
    };

    // Function digitalClock() is used to store current date and time in the target variables and and push the to HTML p tags
    let digitalClock = () => {
      setInterval(() => {
        let newDate = new Date(); // Using Date object to get current date and time

        let dayNames = [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday",
          "Saturday",
          "Sunday",
        ]; // An array of names of days to be used to update currentDay

        let currentDay = dayNames[newDate.getDay() - 1]; // Getting current day (in number:Monday=0-Sunday=6) using Date object, that matches the index of dayNames array
        let currentHour = newDate.getHours();
        switch (currentHour) {
          case (currentHour = 0):
            currentHour = "12 AM";
            break;
          case (currentHour = 1):
            currentHour = "01 AM";
            break;
          case (currentHour = 2):
            currentHour = "02 AM";
            break;
          case (currentHour = 3):
            currentHour = "03 AM";
            break;
          case (currentHour = 4):
            currentHour = "04 AM";
            break;
          case (currentHour = 5):
            currentHour = "05 AM";
            break;
          case (currentHour = 6):
            currentHour = "06 AM";
            break;
          case (currentHour = 7):
            currentHour = "07 AM";
            break;
          case (currentHour = 8):
            currentHour = "08 AM";
            break;
          case (currentHour = 9):
            currentHour = "09 AM";
            break;
          case (currentHour = 10):
            currentHour = "10 AM";
            break;
          case (currentHour = 11):
            currentHour = "11 AM";
            break;
          case (currentHour = 12):
            currentHour = "12 AM";
            break;
          case (currentHour = 13):
            currentHour = "01 PM";
            break;
          case (currentHour = 14):
            currentHour = "02 PM";
            break;
          case (currentHour = 15):
            currentHour = "03 PM";
            break;
          case (currentHour = 16):
            currentHour = "04 PM";
            break;
          case (currentHour = 17):
            currentHour = "05 PM";
            break;
          case (currentHour = 18):
            currentHour = "06 PM";
            break;
          case (currentHour = 19):
            currentHour = "07 PM";
            break;
          case (currentHour = 20):
            currentHour = "08 PM";
            break;
          case (currentHour = 21):
            currentHour = "09 PM";
            break;
          case (currentHour = 22):
            currentHour = "10 PM";
            break;
          case (currentHour = 23):
            currentHour = "11 PM";
            break;

          default:
            break;
        }

        let currentMinutes = newDate.getMinutes(); // Getting current minutes using Date object
        switch (currentMinutes) {
          case (currentMinutes = 0):
            currentMinutes = "00";
            break;
          case (currentMinutes = 1):
            currentMinutes = "01";
            break;
          case (currentMinutes = 2):
            currentMinutes = "02";
            break;
          case (currentMinutes = 3):
            currentMinutes = "03";
            break;
          case (currentMinutes = 4):
            currentMinutes = "04";
            break;
          case (currentMinutes = 5):
            currentMinutes = "05";
            break;
          case (currentMinutes = 6):
            currentMinutes = "06";
            break;
          case (currentMinutes = 7):
            currentMinutes = "07";
            break;
          case (currentMinutes = 8):
            currentMinutes = "08";
            break;
          case (currentMinutes = 9):
            currentMinutes = "09";
            break;

          default:
            currentMinutes = newDate.getMinutes();
            break;
        }

        let currentSeconds = newDate.getSeconds(); // Getting current seconds using Date object
        switch (currentSeconds) {
          case (currentSeconds = 0):
            currentSeconds = "00";
            break;
          case (currentSeconds = 1):
            currentSeconds = "01";
            break;
          case (currentSeconds = 2):
            currentSeconds = "02";
            break;
          case (currentSeconds = 3):
            currentSeconds = "03";
            break;
          case (currentSeconds = 4):
            currentSeconds = "04";
            break;
          case (currentSeconds = 5):
            currentSeconds = "05";
            break;
          case (currentSeconds = 6):
            currentSeconds = "06";
            break;
          case (currentSeconds = 7):
            currentSeconds = "07";
            break;
          case (currentSeconds = 8):
            currentSeconds = "08";
            break;
          case (currentSeconds = 9):
            currentSeconds = "09";
            break;

          default:
            currentSeconds = newDate.getSeconds();
            break;
        }

        let currentTime =
          currentHour +
          " " +
          ":" +
          " " +
          currentMinutes +
          " " +
          ":" +
          " " +
          currentSeconds;

        let dayID = document.getElementById("day"); // Getting #day id from p tag from the markup
        let timeID = document.getElementById("time"); // Getting #time id from p tag from the markup

        dayID.innerHTML = "Today is : " + currentDay + ".";
        timeID.innerHTML = "Current time is : " + currentTime;
      }, 1000);
    };
  </script>
</html>

Posted 17-Mar-22 3:30am

Sharjeel Faiq

Updated 18-Mar-22 8:42am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Answer 1 · 2022-03-18T08:42:00

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.

HTML

<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[^]