Why the code does not works JS?

Question

I have Javascript code following below and could not get alert message why? How can I fix this? Thanks for all response.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="date" id="mydate">
<p id="current"></p>

<script>
  document.getElementById('myDate').onchange = function () {
        var selectedDateFromCalendar = this.value;

        var currentdate = new Date();
        document.getElementById("current").textContent = currentdate.toUTCString();

        // get difference in milliseconds
        var Diff = Math.abs(currentdate.getTime() - selectedDateFromCalendar.getTime());

        // Convert it into days
        var diffDays = Math.ceil(Diff / (1000 * 3600 * 24));
        alert(diffDays);
    }
</script>
</body>

case sensitive: `myDate` and `mydate`. Also try changing `onchange` to `onkeydown` — Pete, Dec 21 '15 at 11:35
`selectedDateFromCalendar` is a string, so it has no `.getTime()` method. Open your browser's develoer console. — , Dec 21 '15 at 11:41
thanks @user1106925. I can fix it in this way var Diff = new Date(selectedDateFromCalendar) - currentdate; — user5695111, Dec 21 '15 at 11:46
the answer to this kind of questions is **"Open the console"** - Most likely they have no idea what it is and if we provide just code fixes they'll stay oblivious to it's usefulness/purpose and ask another question later on that is just as basic as this one. — nicholaswmin, Dec 21 '15 at 12:40

score 1 · Answer 1 · edited May 23 '17 at 11:44

You need to listen to the oninput event. You could also check for onchange and other events. This post is helpful.

Also, the date <input> has a valueAsDate property that returns a date object.

Note: I used console.log rather than alert, because the Stack snippets do not allow alert.

document.getElementById('myDate').oninput = function() {
  var selectedDateFromCalendar = this.value;
  var currentdate = new Date();

  document.getElementById("current").textContent = currentdate.toUTCString();

  // Get difference in milliseconds.
  var diff = Math.abs(currentdate.getTime() - this.valueAsDate.getTime());

  // Convert it into days.
  var diffDays = Math.ceil(diff / (1000 * 3600 * 24));

  console.log(diffDays);
}

<input type="date" id="myDate" />
<p id="current"></p>

score 0 · Answer 2 · answered Dec 21 '15 at 12:38

I have added your code a little bit and it is working perfectly

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="date" id="mydate" onchange="dates()">
<p id="current"></p>

<script>

function dates () {
        var selectedDateFromCalendar = this.value;

        var currentdate = new Date();
        document.getElementById("current").textContent = currentdate.toUTCString();

        // get difference in milliseconds
        var Diff = Math.abs(currentdate.getTime() - (new Date()).getTime());

        // Convert it into days
        var diffDays = Math.ceil(Diff / (1000 * 3600 * 24));
        alert(diffDays);
    }


</script>
</body>    
</html>

Why the code does not works JS?

2 Answers2