# Thread: [RESOLVED] Calculating age

1. Registered User
Join Date
Oct 2012
Posts
9

## [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 .

Was wondring if someone could please help.

2. Do you have some code to evaluate?

3. Registered User
Join Date
Oct 2012
Posts
9
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

4. 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.

5. Registered User
Join Date
Oct 2012
Posts
9
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>
<head>
<title>Lab1</title>
<script type="text/javascript" src="JS/lab1.js"></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>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

6. 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>```

7. Registered User
Join Date
Nov 2010
Posts
1,276
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

8. Registered User
Join Date
Oct 2012
Posts
9
Thankyou very much JMRKER, this makes things alot clearer. Hopefully i can crack on now with the rest of the code.

9. Registered User
Join Date
Sep 2012
Posts
17
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. 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.

#### Thread Information

##### Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.32899 seconds
• Memory Usage 2,946KB
• Queries Executed 15 (?)
More Information
Template Usage (34):
• (1)SHOWTHREAD
• (1)ad_footer_end
• (1)ad_footer_start
• (1)ad_global_above_footer
• (1)ad_global_below_navbar
• (1)ad_global_header1
• (1)ad_global_header2
• (1)ad_navbar_below
• (1)ad_showthread_firstpost_sig
• (1)ad_showthread_firstpost_start
• (1)ad_thread_first_post_content
• (1)ad_thread_last_post_content
• (1)bbcode_code
• (1)bbcode_quote
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (1)header
• (1)headinclude
• (1)headinclude_bottom
• (10)memberaction_dropdown
• (1)navbar
• (4)navbar_link
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (10)postbit
• (10)postbit_onlinestatus
• (10)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
• showthread
Included Files (26):
• ./showthread.php
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/functions_navigation.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_facebook.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (72):
• init_startup
• friendlyurl_resolve_class
• 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_postinfo_query
• fetch_postinfo
• fetch_threadinfo_query
• fetch_threadinfo
• fetch_foruminfo
• load_show_variables
• load_forum_show_variables
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• showthread_start
• showthread_getinfo
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• fetch_musername
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• showthread_post_start
• showthread_query_postids
• showthread_query
• bbcode_fetch_tags
• bbcode_create
• showthread_postbit_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete
• build_navigation_data
• build_navigation_array
• check_navigation_permission
• process_navigation_links_start
• process_navigation_links_complete
• set_navigation_menu_element
• build_navigation_menudata
• build_navigation_listdata
• build_navigation_list
• set_navigation_tab_main
• set_navigation_tab_fallback
• navigation_tab_complete
• fb_like_button
• showthread_complete
• page_templates