combining javascript and html

Question

Design and code a program which prompts a user for the year they were born, calculates the user's age and displays the user's age. If the user's age is over 40 then set the background color of the web page to red. The solution must use the JavaScript Date object and use programmer created functions for calculating the user's age.

pretty small problem i just need to make the screen turn red if age is more then 40 I just cant seem to make that happen...

    <html>
<head>
<title> Age of person </title>
<div id="age"></div>
<body>
<script>
function determine_age_of_person ( year )
{
var today = new Date();
var now_year = today.getFullYear();
var age = now_year - year_person_was_born;
return age;
}


var year_person_was_born;
//unsure about below statement the '==' part
var age_of_person==age;

do
{
year_person_was_born = prompt("Enter year you were born", "");
year_person_was_born = parseInt (year_person_was_born1 );
}

while (is(year_person_was_born));

age_of_person = determine_age_of_person ( year_person_was_born );

if (age_of_person>40)
document.body.style.backgroundColor = "red";

else
document.body.style.backgroundColor = "white";

document.getElementById("age").innerHTML = "You are " + age_of_person + " years old";


</script>
</body>
</html>

Your code says to turn it red if they were born in a year greater than 40. You should use their age for that test. — Lee Meador
– Lee Meador, Commented May 1, 2013 at 22:02
So the person born on 2000-01-01 and the person born on 2000-12-31 have the same age? — Arjan
– Arjan, Commented May 1, 2013 at 22:18
Your HTML is incorrect; the div needs to be inside the <body> element. — Justin Morgan
– Justin Morgan, Commented May 1, 2013 at 22:24

Jason Sperske · Accepted Answer · 2013-05-01 22:29:28Z

3

Ok there are lot of code placement issues here (you have an html element outside of the body element, return statements outside of functions, function arguments that you don't use). Here is a simplified version of what you are building (demo)

<html>
  <head>
   <title> Age of person </title>
  </head>
  <body>
    <div id="age"></div>
    <script>
      function determine_age_of_person (year) {
        return (new Date()).getFullYear() - year;
      }

      var age_of_person = determine_age_of_person(parseInt (prompt("Enter year you were born", ""), 10));

      if (age_of_person>40) {
        document.body.style.backgroundColor = "red";
      } else {
        document.body.style.backgroundColor = "white";
      }
    document.getElementById("age").innerHTML = "You are " + age_of_person + " years old";
    </script>
  </body>
</html>

Here is breakdown of the changes I made:

Moved <div id="age"></div> inside the body
Used argument year in determine_age_of_person() instead of global variable
Combined prompt, parseInt and determine_age_of_person into one line (and added a radix to parseInt, because JavaScript has weird rules related to non base 10 numbers, it's a good habit to get into)
Added curly braces to if statement
Removed useless code like do() and while()

edited May 1, 2013 at 22:29

answered May 1, 2013 at 22:23

Jason Sperske

30.5k8 gold badges77 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Murphy Over a year ago

thanks Jason Sperske i dont have the rep allowed to +1 your post but thank you very much !!

jamauss · Accepted Answer · 2013-05-01 22:06:40Z

2

change

if (year_person_was_born > 40)

to

if (age_of_person > 40)

answered May 1, 2013 at 22:06

jamauss

1,0431 gold badge16 silver badges36 bronze badges

3 Comments

Paul Roub Over a year ago

You'll also want to add return age; to determine_age_of_person

jamauss Over a year ago

^ Correct - or since you have age_of_person as a global variable - you could just set age_of_person to the result of now_year - year. I'm not sure why you have parseInt there around the result of that subtraction - I don't think it's necessary.

jamauss Over a year ago

return age; would need to be the last statement inside the function. Nothing else in the function will run after that line executes.

Collectives™ on Stack Overflow

combining javascript and html

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related