# [RESOLVED] Calculating age

• 10-14-2012, 03:58 AM
hobnob487
[RESOLVED] Calculating age
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 .

• 10-14-2012, 09:23 AM
JMRKER
Do you have some code to evaluate?
• 10-14-2012, 09:26 AM
hobnob487
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
};
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 :confused:
• 10-14-2012, 10:40 AM
JMRKER
That's the JS. Your last function appears to not be closed. Is that truly your design or did you leave something out?

Why waste my time by making me re-create the HTML portion as well? The JS works with the HTML and very seldom works all alone.

There are lots of people to help on the forum. It would be better if you tried to help the ones helping you.
• 10-14-2012, 10:46 AM
hobnob487
This is a School project. I've only been doin JS for 3 weeks so this is why i need help with 'basic' code.

and i appreciate any help i can get .

heres the html part

<html>
<title>Lab1</title>
<script type="text/javascript" src="JS/lab1.js"></script>
<body>
<p id="test"></p>
<button id="button">Press Me</button>
<p/>
Colours: <select id="list">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<p/>
Your Birthday: <input type="date" id="dob"/>
A Number: <input type="range" id="range" min="1" max="10" value="1">
<span id="value">1</span>

</body>
</html>

thanks again
• 10-14-2012, 10:32 PM
JMRKER
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>```
• 10-14-2012, 11:10 PM
xelawho
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
• 10-15-2012, 04:10 AM
hobnob487
Thankyou very much JMRKER, this makes things alot clearer. Hopefully i can crack on now with the rest of the code.
• 10-15-2012, 04:56 AM
Harry14
Thank you for your sharings guys,actually this is something new to me, and it is always good to know new things.Sorry

for not helping,still a newbie here
• 10-15-2012, 08:54 AM
JMRKER
Quote:

Originally Posted by hobnob487
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.

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.31689 seconds
• Memory Usage 2,384KB
• Queries Executed 11 (?)
Template Usage (21):
• (1)bbcode_code_printable
• (1)bbcode_quote_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates