Javascript以HTML形式计算所有年龄的总和答案

【问题标题】：Javascript Calculate sum of all age in HTML formJavascript以HTML形式计算所有年龄的总和
【发布时间】：2014-03-18 11:06:00
【问题描述】：

我有一个有 4 列的 HTML 表单。前两个是名字和姓氏。第三个是 HTML 日期，它接收用户的出生日期。第四个是从 HTML 出生日期字段生成的年龄。

这里的问题或问题是我想计算所有年龄的总和然后将其显示在HTML表格中，然后还要计算所有年龄的平均值并将结果也显示在HTML中。

仔细观察，除了所有年龄的总和及其平均值之外，其他所有的计数都在工作和显示。

下面是我的 HTML

<html>
<head>
<title>Date of Birth Registration</title>

<link rel="stylesheet" type="text/javascript"   href="http://cdnjs.cloudflare.com/ajax/libs/uikit/1.2.0/css/uikit.css"/>
<link rel="stylesheet" type="text/javascript" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/javascript" href="http://cdnjs.cloudflare.com/ajax/libs/uikit/1.2.0/css/uikit.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/uikit/1.2.0/js/uikit.js"></script> 
<script type="text/javascript" src= "http://cdnjs.cloudflare.com/ajax/libs/uikit/1.2.0/js/uikit.min.js"></script>
<script type="text/javascript" src= "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="formiteration5.js"></script>
</head>
<body>
<div class="alert alert-success"><h1>Birth Registration</h1></div>
<hr />
<form id ="inputFrom" class="uk-form">
<label>First Name:
<input type='text' id='firstname'  value='' placeholder="" class="uk-form-success"/>
</label>
<label>Last Name:
<input type='text' id='lastname' placeholder="" class="uk-form-success"/>
</label>
<label for="size_1">D.O.B:</label><input type="date" name="size" id="birthDate" value="dd/mm/yy" laceholder="" class="uk-form-danger"/>
<input type='button' onclick='regBirth()' value='Add new person' class="uk-button-primary"/>
</form>
<hr />
<table id="details" class="uk-table uk-table-hover uk-table-striped uk-table-condensed">
<tr>
<th>First NameName</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Age</th>
</tr> 
</table>

<h4>Statistics</h1>
<hr />
<div padding ="10px 10px 10px">
<div class="uk-grid">
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box-primary"><h4><br/>
email:m.cainton@gmail.com</p>

</div>
</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box-primary"><h5><b>Total Count:</b></h5>
<p id="count"></p><h5><b>Sum:</b></h5>
<p name ="sum"id="sumofAge"></p></div>
</div>
<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box-primary" ><h5><b>Mean:</b></h5>
<p id="meanAge"></p>
</div>
</div>
</div>
</div>
</body>
</html>

下面是我的 Javascript

var allPeople = [];// global array
function regBirth() {


'use strict';
 // myArray should be instantiated as an object and not as an array
    var myObject = {};// empty object initialisation
    //var fname,lname,dob;
    myObject.fname = document.getElementById('firstname').value; //Object one
    myObject.lname = document.getElementById('lastname').value;//Object two
    myObject.dob = document.getElementById('birthDate').value;//Object three
    var dateOfBirth = new Date(myObject.dob);//Date of Birth
    var today = new Date();
    var dobYear = dateOfBirth.getFullYear();
    var dobMonth = dateOfBirth.getMonth() + 1;
    var dobDay = dateOfBirth.getDate();

    var myAge = Math.floor((today - dateOfBirth )/ 31557600000);
    myAge = document.getElementsByClassName("sum");
    var total = 0;
    for (var i = 0; i < myAge.length; i++) {
        total += Number(myAge[i].value);
    }

    document.getElementById('sumofAge').value = total;

    console.log(myAge);
    //document.getElementById("age").innerHTML = myAge; 
    allPeople.push(myObject);
    console.log(allPeople.length);
    console.log(allPeople);
    // use var when you create tabularForm 
    var inputForm = document.getElementById("inputFrom").reset();
    var tabularForm = document.createDocumentFragment();
    var tablerow = document.createElement('tr'); 
    // iterate through the allPeople array
    // append to the dom the latest person (ie., myArray)
    var fname = document.createElement('td');//Start of First Name
    fname.innerHTML = myObject.fname;
    tablerow.appendChild(fname);//End of First Name

    var lname = document.createElement('td');//Start Lastname
    lname.innerHTML = myObject.lname;
    tablerow.appendChild(lname);//End Lastname

    var dob = document.createElement('td');//Start DOB
    dob.innerHTML = myObject.dob;
    tablerow.appendChild(dob);//End DOB

    var myBirthDay = document.createElement('td'); //Start of Birth Day
    myBirthDay.innerHTML = myAge;
    tablerow.appendChild(myBirthDay);//End of Birth Day

    tabularForm.appendChild(tablerow); 
    document.getElementById("details").appendChild(tabularForm);  

    var totalPeople = allPeople.length; //Start Count
    document.getElementById("count").innerHTML=totalPeople; // Count declaration
}

【问题讨论】：

控制台中有错误信息吗？
ReferenceError:total is undefined...这就是错误
当我也试图找到你的错误时，发现了一个错误。年龄的计算是错误的。结果是小了一年。不要忘记检查它。
因为它基于日期而不是月份..例如，如果生日是 23/03/1980，今天是 19/03/2014，虽然现在是 34 年，但我仍然是 33年，因为我还没有达到 3 月 23 日......当我输入 2014 年 3 月 23 日的日期时，我 34 岁
我的年龄和我的家庭都小了一岁^^

标签： javascript html

【解决方案1】：

myAge 首先用作数字，然后用作数组，我认为这可能会给您带来一些问题......这更有意义：

var myAge = Math.floor((today - dateOfBirth) / 31557600000);
var sum = document.getElementsByClassName("sum");
var total = 0;
for (var i = 0; i < sum.length; i++) {
     total += Number(sum[i].value);
}

【讨论】：

另外第二个错误是，不存在具有 css 类 'sum' 的元素。
那么 sum 的值是从哪里来的呢？
@IslandKing 根据您的 javascript 代码，应该有“sum”类的元素，其中 sum 变量应该从中获取其值。但是，您的 HTML 中没有任何此类元素。
@IslandKing 您的错误的真正原因是，您尝试将一个值与一个空值相加。
怎么样 var sum = myAge;变量总计 = 0; for (var i = 0; i