www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Calculating age

  1. #1
    Join Date
    Oct 2012
    Posts
    9

    resolved [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. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Do you have some code to evaluate?

  3. #3
    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. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    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. #5
    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. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350

    Lightbulb

    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. #7
    Join Date
    Nov 2010
    Posts
    1,036
    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. #8
    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. #9
    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. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    Quote Originally Posted by hobnob487 View Post
    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
  •  
HTML5 Development Center



Recent Articles