HTML 按钮未运行 JavaScript 函数和函数输出未显示答案

【问题标题】：HTML button not running JavaScript function and function output not displayingHTML 按钮未运行 JavaScript 函数和函数输出未显示
【发布时间】：2016-11-10 02:18:09
【问题描述】：

这是我通过输入生日来计算一个人的年龄的代码。我在读取生日输入和在 getAge 函数中使用时遇到问题。我也无法在第二个文本字段中显示年龄。我不确定如何更正这些。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Age Calculator</title>
    <script>
    var birthday;

    function getAge(birth) {
        var bday = document.getElementById("bday");
        var ageDisplay = document.getElementById("ageDisplay");
        var today = new Date();
        var curr_date = today.getDate();
        var curr_month = today.getMonth() + 1;
        var curr_year = today.getFullYear();
        var pieces = birth.split('/');
        var birth_date = pieces[0];
        var birth_month = pieces[1];
        var birth_year = pieces[2];
        if (curr_month == birth_month && curr_date >= birth_date) return parseInt(curr_year - birth_year);
        if (curr_month == birth_month && curr_date < birth_date) return parseInt(curr_year - birth_year - 1);
        if (curr_month > birth_month) return parseInt(curr_year - birth_year);
        if (curr_month < birth_month) return parseInt(curr_year - birth_year - 1);
    }
    var age = getAge(birthday);
    ageDisplay.value = age
    </script>
</head>

<body style="background-color:red">
    <form>
        <fieldset>
            <label>Type your Date of Birth: </label>
            <input type="text" id="bday" />
            <input type="button" value="click me" onclick="getAge()" />
            <br/>
            <br/>
            <label>Your Age is: </label>
            <input type="text" id="ageDisplay" />
        </fieldset>
    </form>
    <body>
</html>

【问题讨论】：

标签： javascript html button io

【解决方案1】：

第一个

    function getAge(birth)

和

不一样

    getAge()

第二

    var pieces = birth.split('/');

应该是

    var pieces = []; 
    pieces = birth.split('/');

【讨论】：

【解决方案2】：

您如何知道您的用户正在以您想要的格式输入日期？首先，您必须通过在输入的占位符中向他们提供说明来确保他们以您想要的格式输入。让我们假设他们以“YYYY-MM-DD”格式提供输入。这是使用moment js的解决方案。您的代码的问题是您没有获得 bDay 字段的值。获取这样的值

var bday = document.getElementById("bday").value;

立即拆分

    var bDaySplit = bDay.split('/');
    var birthYear = bDaySplit[0], month = bDaySplit[1], day = bDaySplit[2];
    var currDate = moment(), // get the current date using monment js
        birthday = moment(birthYear + '/' + month + '/' + day); //
    var age = currDate.diff(birthday, 'years');

现在age 是您所需要的。随心所欲地使用它。

希望这会有所帮助。

P.S- 如果您不知道，请查看 moment js 库。

【讨论】：

【解决方案3】：

嘿，你的脚本中有这段代码

var age = getAge(birthday);
ageDisplay.value = age

were birthday 未定义并导致此行出错。

var pieces = birth.split('/');

这就是你的函数停止工作的原因。

第二个问题是我在你的函数中没有看到任何从出生元素获取数据以获取值的代码

var bday = document.getElementById("bday").value;

希望有帮助

【讨论】：