Ive been trying to calculate the age of someone in Javasript by taking their d.o.b from a drop down calender where its alerts to - say ur birthday is and you are " " years old
Ive tried a few different ways of doing this and had no joy, i can only get the first alert to work and then its saying age is undefined .
window.onload = function(){
var para = document.getElementById("heading");
para.innerText = "A short exercise on creating dynamic web content.";
var button = document.getElementById("button"); // get the button element
button.onclick = function(){ // Attach a function to it
alert("I've been clicked");
};
var list = document.getElementById("list");
list.onchange = function(){
var item = list.options[list.selectedIndex].text; // This code extracts the text
changeColour(item); // from the selected item in
};
// list (at the .onchange event)
var dob = document.getElementById("dob");
dob.oninput = function(){
alert("your date of birth is: " + dob.value);
daysOld();
};
var range = document.getElementById("range");
var value = document.getElementById("value");
range.onchange = function () {
value.innerText = range.value;
};
function daysOld(dob){
var msPerDay = 1000 * 60 * 60 * 24,
now = new Date(),
diff = now - dob;
var age = diff / msPerDay;
alert("you are: " + age.value);
return diff/msPerDay;
}
function changeColour(colour){
var c = 0;
switch(colour){
case "Red":
c = "#f00";
break;
case "Green":
c = "#0f0";
break;
case "Blue":
c = "#00f";
break;
}
document.bgColor = c;
Ive been looking at it for hours, hoping its not basic syntax error
Spotted a number of problems. Take a look at this version versus your postings.
Obvious ones are:
1. There is no .innerText that I know of. Changed to .innerHTML
2. Changed the onchange() to onblur() for your DOB calculations. Otherwise you could not enter anything without getting a bunch of alerts
3. Cannot calculate the difference between 'now' (a date) and 'dob' (a string) without changing to the same type object (date)
Note: You should enclose your script between [ code] and [ /code] tags (without the spaces)
to make your program easier to read, copy, test and/or review for other forum members.
Code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<head>
<title>Lab1</title>
<!-- script type="text/javascript" src="JS/lab1.js" -->
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?266537-Calculating-age&p=1228527#post1228527
window.onload = function(){
var para = document.getElementById("heading");
para.innerText = "A short exercise on creating dynamic web content."; // Note error here...
var button = document.getElementById("button"); // get the button element
button.onclick = function(){ // Attach a function to it
alert("I've been clicked");
};
var list = document.getElementById("list");
list.onchange = function(){
var item = list.options[list.selectedIndex].text; // This code extracts the text
changeColour(item); // from the selected item in
};
// list (at the .onchange event)
var dob = document.getElementById("dob");
// dob.oninput = function(){
dob.onblur = function(){
alert("your date of birth is: " + dob.value);
daysOld(dob.value);
};
var range = document.getElementById("range");
var value = document.getElementById("value");
range.onchange = function () {
value.innerHTML = range.value;
};
function daysOld(dobValue){
var tmp = dobValue.split('-');
var DOB = new Date(tmp[0],tmp[1],tmp[2]);
var msPerDay = 1000 * 60 * 60 * 24,
now = new Date(),
diff = now - DOB;
var age = diff / msPerDay;
alert("you are: " + age+ ' days old');
return diff/msPerDay;
}
function changeColour(colour){
var c = 0;
switch(colour){
case "White": c = "#fff"; break;
case "Red": c = "#f00"; break;
case "Green": c = "#0f0"; break;
case "Blue": c = "#00f"; break;
}
document.bgColor = c;
}
}
</script>
</head>
<body>
<heading><h1>HTML5 Test Page</h1>
<p id="heading"></p> </heading>
<p id="test"></p>
<button id="button">Press Me</button>
<p/>
Colours:
<select id="list">
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<p/>
Your Birthday: <input type="date" id="dob" value="2007-08-16"/>
<p />
A Number: <input type="range" id="range" min="1" max="10" value="1">
<span id="value">1</span>
</body>
</html>
innerText is the IE-only version of textContent, which as I understand it is basically a way to get the equivalent of just the text portion of the innerHTML
but it's all so hopelessly buggy that the cross-browser innerHTML is usually a much better way to go, particulaly if you're just setting content
Thankyou very much JMRKER, this makes things alot clearer. Hopefully i can crack on now with the rest of the code.
The rest of you code works with just a touch of mods.
The main problem you may have is seeing some of the effects of HTML5 element types (date and range) without a HTML5 compliant browser.
Default actions are to earlier versions of HTML.
[RESOLVED] Calculating age
Reply With Quote
Originally Posted by hobnob487
Bookmarks