为什么代码不起作用JS

Why the code does not works JS?

本文关键字：JS 不起作用 代码 为什么      更新时间：2023-09-26

我下面有Javascript代码，但无法获得警报消息，为什么？我该怎么解决这个问题？感谢所有回复。

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

您需要监听oninput事件。您还可以检查onchange和其他事件。这篇文章很有帮助。

此外，日期<input>具有返回日期对象的valueAsDate属性。

注意： 我使用了console.log而不是alert，因为Stack代码段不允许使用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>

我添加了一点您的代码，它运行得很好

<!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>
相关文章：