将 JavaScript 年龄计算返回到屏幕答案

【问题标题】：Return JavaScript age calculation to screen将 JavaScript 年龄计算返回到屏幕
【发布时间】：2013-01-12 09:28:39
【问题描述】：

使用 HTML 5、CSS、JavaScript 和 JQuery 创建 Web 应用程序。

我使用了新的 Date() 函数来生成今天的日期。我还使用了 JQuery 的“datepicker”函数来允许用户选择他们的 DOB。这些都工作得很好。

我想要的是在选择 DOB 时计算年龄。我已经包含了一个函数来计算年龄，它依赖于日期和出生日期，但不能让它将数字返回到屏幕上。这可以在下面看到。

<tr>
    <td>Age:</td>
    <!--td><input type="text" id="age" /></td-->
    <td> 
            <script type = "text/javascript">
        var date = document.getElementById("adDate").value
        var dob = document.getElementById("datepicker").value
        var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/
        if (pattern. test(dob)) {
            var currentYear = date.getFullYear()
            var birthYear = date.getFullYear()
            var age = currentYear - birthYear
            document.write(age)
        } 
        </script>
    <td>
</tr>

我在网上搜索了解决方案，但只是获得了基本的 JavaScript 年龄计算。任何帮助将不胜感激。

非常感谢。

我尝试应用一些更改，但无济于事。我已经更新了如下所示的 JS。

var date = document.getElementById("adDate").value
var dob = document.getElementById("datepicker").value
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/
if (pattern. test(dob)) {
    var currentYear = new Date(date).getFullYear()
    var birthYear = new Date(dob).getFullYear()
    var age = currentYear - birthYear

    var spanAge = document.getElementById("age")
    spanAge.innerHTML = age
}

还有 HTML。

<tr>
    <td>Age:</td>
    <td><span id="age"></span></td>
</tr>

这一定与使用日期选择器生成 DOB 有关。我尝试应用 onSelect 函数，但似乎没有任何效果。

还有其他建议吗？

【问题讨论】：

birthYear 不应使用日期。您还应该使用 UI 元素中的值创建 Date 对象。
您需要一个事件来触发计算。我建议将 onSelect api.jqueryui.com/datepicker/#option-onSelect 用于 Datepicker
啊，我明白了。感谢您的快速回复！

标签： javascript html date-arithmetic

【解决方案1】：

修复你的代码：

var currentYear = new Date(date).getFullYear()
var birthYear = new Date(dob).getFullYear()

恢复您的表格单元格：

<td><span id="age"></span></td>

并且，而不是 document.write 使用这个：

// document.write(age) // Remove this line.
var spanAge = document.getElementById("age")
spanAge.innerHTML = age

这里是一个模拟：

http://jsfiddle.net/dEaae/1/

【讨论】：

如果我错了，请纠正我，但您的代码只是从当前年份中减去出生年份。因此，如果我在 10 年前的 12 月 31 日出生，我将被列为与同年 1 月 1 日出生的人相同的年龄，即使他们可能大一岁

【解决方案2】：

您应该确保您创建了一个有效的 Date 对象，您可以将来自 UI 元素的值传递给它：

var currentYear = new Date().getFullYear()            
var birthYear = new Date('5/6/1987').getFullYear()             
var age = currentYear - birthYear

【讨论】：

【解决方案3】：

你应该选择一个html元素来显示结果

例如：

            <div id = "printHere"></div>

             <tr>
<td>Age:</td>
<!--td><input type="text" id="age" /></td-->
<td> 
        <script type = "text/javascript">
         //assuming you have "age" here

          //using jquery
          $("#printHere").html(age);
    } 
    </script>
<td>

【讨论】：

date.getFullYear() 不是函数，你需要一个 Date 对象