0

I am just beginning to learn html and tried to make an html page with a date input with a submit button and a clock that shows the remaining time when time is selected and submit button is clicked but code is simply not working and I don't know where to fix it.

here is html:

<body class="body">
    <ul class="header">
        <p id="header_name">
            Countdown
        </p>
    </ul>
    <div class="menu">
        <form class="form">
            <div>
                <p class="date">choose a date</p>
            </div>
            <div>
                <input autocomplete="off" autofocus class="input__time" id="input__time" type="date">
            </div>
            <div>
                <button class="submit" type="submit">start countdown</button>
            </div>
        </form>
        <div class="until" id="myCountdown">
            <div class="until__component">
                <div class="until__numeric until__numeric--days">00</div>
                <div class="until__unit ">Days</div>
            </div>
            <div class="until__component">
                <div class="until__numeric until__numeric--hours">00</div>
                <div class="until__unit ">Hours</div>
            </div>
            <div class="until__component">
                <div class="until__numeric until__numeric--minutes">00</div>
                <div class="until__unit ">minutes</div>
            </div>
            <div class="until__component">
                <div class="until__numeric until__numeric--seconds">00</div>
                <div class="until__unit ">seconds</div>
            </div>
            <div class="until__event">Until DD MM YYYY</div>            
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/dayjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/plugin/duration.min.js"></script>
    <script src="main.js"></script>
</body>

and js:

dayjs.extend(dayjs_plugin_duration);

function activateCountdown(date) {
    const targetDate = dayjs(date);

    document.getElementById("myCountdown").querySelector(".until__event").textContent = `Counting down until ${ targetDate.format("YYYY MM DD")}`;

    setInterval(() => {
        const now = dayjs();
        const duration = dayjs.duration(targetDate.diff(now)); 

        if (duration.asMilliseconds() <= 0) return;

        document.getElementById("myCountdown").querySelector(".until__numeric--seconds").textContent = duration.seconds().toString().padStart(2, "0");
        document.getElementById("myCountdown").querySelector(".until__numeric--minutes").textContent = duration.minutes().toString().padStart(2, "0");
        document.getElementById("myCountdown").querySelector(".until__numeric--hours").textContent = duration.hours().toString().padStart(2, "0");
        document.getElementById("myCountdown").querySelector(".until__numeric--days").textContent = duration.asDays().toFixed(0).toString().padStart(2, "0");
    }, 250);
}

document.querySelector("form").addEventListener('submit', activateCountdown(document.getElementById("input__time")))```


1 Answer 1

0

The problem comes from your last line of code:

document.querySelector("form")
  .addEventListener('submit', activateCountdown(document.getElementById("input__time")))```

Apart the last 3 ``` that are clearly a typo, you must remember that:

1. Forms 'submit' event triggers a page reload

This is default behavior, so you have to prevent it in your listener. Otherwise, when you press the button the page will be fully reloaded and your code is gone.

To prevent default behaviors on events, you need to use event.preventDefault()

2. Pass values, if you need to pass a value

You are passing as a parameter to your function: activateCountdown(date) an HTML element, not a date.

activateCountdown(document.getElementById("input__time"))

But you need to pass the date inside this input, so change this code to:

activateCountdown(document.getElementById("input__time").value)

As a result of points 1. and 2. rewrite your last line of code to (remember to remove the ``` also):

document.querySelector("form")
  .addEventListener('submit', function(event) {
     event.preventDefault(); // **1
     activateCountdown(document.getElementById("input__time").value) // **2
   })

// **1 this prevents the default behavior of reloading the page
// **2 adding .value reads and passes to the function the date inside your input
Working snippet (with a splash of CSS):

dayjs.extend(dayjs_plugin_duration);

function activateCountdown(date) {
  const targetDate = dayjs(date);

  document.getElementById("myCountdown").querySelector(".until__event").textContent = `Counting down until ${ targetDate.format("YYYY MM DD")}`;

  setInterval(() => {
    const now = dayjs();
    const duration = dayjs.duration(targetDate.diff(now));

    if (duration.asMilliseconds() <= 0) return;

    document.getElementById("myCountdown").querySelector(".until__numeric--seconds").textContent = duration.seconds().toString().padStart(2, "0");
    document.getElementById("myCountdown").querySelector(".until__numeric--minutes").textContent = duration.minutes().toString().padStart(2, "0");
    document.getElementById("myCountdown").querySelector(".until__numeric--hours").textContent = duration.hours().toString().padStart(2, "0");
    document.getElementById("myCountdown").querySelector(".until__numeric--days").textContent = duration.asDays().toFixed(0).toString().padStart(2, "0");
  }, 250);
}

document.querySelector("form")
  .addEventListener('submit', function(event) {
    event.preventDefault();
    activateCountdown(document.getElementById("input__time").value);
  })
body {
  margin: 0;
  padding: 0 1rem;
  font-family: sans-serif;
}

input {
  font-family: inherit;
  padding: 8px;
  border-radius: 4px;
}

.main {}

.submit {
  padding: 10px;
  background: lightblue;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
}

.until__component {
  margin: 0.5rem;
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
}
<body class="body">
  <header class="header">
    <h1 id="header_name">Countdown</h1>
  </header>

  <main class="main">
    <p class="date">Choose a date:</p>
    <form class="form">
      <input autocomplete="off" autofocus class="input__time" id="input__time" type="date">
      <button class="submit" type="submit">start countdown</button>
    </form>

    <div class="until" id="myCountdown">
      <div class="until__component">
        <div class="until__numeric until__numeric--days">00</div>
        <div class="until__unit ">Days</div>
      </div>

      <div class="until__component">
        <div class="until__numeric until__numeric--hours">00</div>
        <div class="until__unit ">Hours</div>
      </div>

      <div class="until__component">
        <div class="until__numeric until__numeric--minutes">00</div>
        <div class="until__unit ">minutes</div>
      </div>

      <div class="until__component">
        <div class="until__numeric until__numeric--seconds">00</div>
        <div class="until__unit ">seconds</div>
      </div>

      <div class="until__event">Until DD MM YYYY</div>
    </div>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/dayjs.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.1/plugin/duration.min.js"></script>
  <script src="main.js"></script>
</body>

2
  • omg it worked... I should've asked here many hours before scratching my head wondering what is going on.. Thank you so much
    – Jeff
    May 4, 2022 at 18:52
  • @Jeff you're welcome. But I have to disagree with you, scratching head, searching, googling and trying to solve on your own is the best, quickest and strongest way to learn ;)
    – cheesyMan
    May 4, 2022 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.