making countdown timer with date input-CodePudding

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 >
    <ul >
        <p id="header_name">
            Countdown
        </p>
    </ul>
    <div >
        <form >
            <div>
                <p >choose a date</p>
            </div>
            <div>
                <input autocomplete="off" autofocus  id="input__time" type="date">
            </div>
            <div>
                <button  type="submit">start countdown</button>
            </div>
        </form>
        <div  id="myCountdown">
            <div >
                <div >00</div>
                <div >Days</div>
            </div>
            <div >
                <div >00</div>
                <div >Hours</div>
            </div>
            <div >
                <div >00</div>
                <div >minutes</div>
            </div>
            <div >
                <div >00</div>
                <div >seconds</div>
            </div>
            <div >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")))```

CodePudding user response：

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 >
  <header >
    <h1 id="header_name">Countdown</h1>
  </header>

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

    <div  id="myCountdown">
      <div >
        <div >00</div>
        <div >Days</div>
      </div>

      <div >
        <div >00</div>
        <div >Hours</div>
      </div>

      <div >
        <div >00</div>
        <div >minutes</div>
      </div>

      <div >
        <div >00</div>
        <div >seconds</div>
      </div>

      <div >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>

1. Forms 'submit' event triggers a page reload

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

Working snippet (with a splash of CSS):

1. Forms `'submit'` event triggers a page reload