I'm trying to make a countdown timer with HTML and Javascript which has a preset date, but whose date can be changed by the user

Question

I'm currently using a form so that the user can change the date the timer is set to count down to. The problem is that the Javascript function that's supposed to run when the user clicks the "submit" button is working, but even though I've entered something into the "date" input box of the form, multiple tests have shown that it doesn't show that I've input anything. I don't understand what I need to do. Here is my code:

<html>
<p id="demo"></p>
    <div class='form'>
        <form>
            enter any date here <br>
            <br>
            <input type="date" id="date"> <br>
            <br>
            <button onclick='countdown()' class="submitbutton">submit</button>
        </form>
    </div>
    <script>
        if (document.cookie=="[object HTMLInputElement]") {
            var countDownDate = new Date("10/17/2020").getTime();
        }
        else {
            var countDownDate = new Date(document.cookie).getTime();
        }
        var countDownDate = new Date("10/17/2020").getTime();
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    </script>
    <script>
        function countdown() {
            var date = document.getElementById("date");
            document.cookie = date;
            countDownDate = new Date("10/17/2020").getTime();
            var x = setInterval(function() {
                var now = new Date().getTime();
                var distance = countDownDate - now;
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "the date you entered is before today";
                    }
            }, 1000);
        }
    </script>
</html>

Thank you in advance.

Answer 1

I think that you should enter the count down date. but current code is not working. They have a issues in the part to get the date. I fixed it. please check it.

https://codepen.io/stargroup0075/pen/jOPdRPd

<html>
<p id="demo"></p>
    <div class='form'>
        <form>
            enter any date here <br>
            <br>
            <input type="date" id="date"> <br>
            <br>
            <button onclick='countdown()' class="submitbutton" type="button">submit</button>
        </form>
    </div>
    <script>
        if (document.cookie=="[object HTMLInputElement]") {
            var countDownDate = new Date("10/17/2020").getTime();
        }
        else {
            var countDownDate = new Date(document.cookie).getTime();
        }
        var countDownDate = new Date("10/17/2020").getTime();
        var x = setInterval(function() {
            var now = new Date().getTime();
            var distance = countDownDate - now;
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
        }, 1000);
    </script>
    <script>
        function countdown() {
            var date = document.getElementById("date").value;
            document.cookie = date;
            countDownDate = new Date(date).getTime();
            var x = setInterval(function() {
                var now = new Date().getTime();
                var distance = countDownDate - now;
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
                if (distance < 0) {
                    clearInterval(x);
                    document.getElementById("demo").innerHTML = "the date you entered is before today";
                    }
            }, 1000);
        }
    </script>
</html>

I'm trying to make a countdown timer with HTML and Javascript which has a preset date, but whose date can be changed by the user

Question

1 answers

solution1
0 ACCPTED

I'm trying to make a countdown timer with HTML and Javascript which has a preset date, but whose date can be changed by the user

Question

1 answers

solution1 0 ACCPTED

solution1
0 ACCPTED