jQuery calculating seconds of life

Question 1

<!DOCTYPE html>
<html lang="en"/>

<head>
    <title>Seconds</title>
    <meta charset="utf-8"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    Years <input type="value" name="secs" id="secs"><br>
    <input id="sub" type="submit" value="Submit">

<script type="text/javascript">

$(function(){

    $('#sub').click(function(){
        var years = $('#secs').val();

    var secs = years * 365 *24*60*60;
    $('body').append( '<p>You have' + secs + 'of life</p>' );
    });
});

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

Errors you had made:

No jQuery included

$(body) should be $('body')

 '<p>'"You have"+ secs + "of life"'</p>' should be '<p>You have' + secs + 'of life</p>'

 var years = $('#secs').val(); //needed to be within your function otherwise it is calculated on page load NOT when you click button (so will always be 0)

Question 2

There are several problems with that code:

If you look in your web console, you'll see a syntax error, because of this line:
```
$( body ).append( ''"You have"+ secs + "of life"'' );
```
Note that you have a string, '', immediately followed by another string, "You have". You can't do that. There's a similar problem at the end of the line.

Each of those should be just one string:
```
$( body ).append( "You have"+ secs + "of life" );
```
Your code relies on jQuery, but there doesn't seem to be a script tag including jQuery in your page. You'll need to add that if it's not there.
This line is problematic in two ways:
```
years = $('#secs').val();
```
You're grabbing the value from the #secs element as soon as the page loads, rather than waiting for the user to fill in a value. Also, you seem to be expecting to grab a number of years from it. The id "secs" seems...odd...for a field you're expecting to find years in.

Rather than grabbing the value on load, grab it when the sub button is clicked. (Move it into your click handler function.)
Your button is a submit button, and so it will submit the form. If you're going to show the information in the existing page, you don't want it to do that. Change the type of the button to button rather than submit.
You're falling prey to The Horror of Implicit Globals because you haven't declared your years variable. Always declare your variables using var, in the innermost scope where they're needed.

Question 3

You have several errors.

Added .preventDefault() to stop click event on your submit button submitting the form
Best practice is to use parseInt() to convert input to integer
You need to read the years within the click handler
Your treatment of your strings was incorrect when appending to body

Please try:

$('#sub').click(function (e) {
    e.preventDefault();
    var years = $('#secs').val();
    var secs = parseInt(years, 10) * 365 * 24 * 60 * 60;
    $('body').append('<p>You have ' + secs + ' of life</p>');
});

JS Fiddle - working version

Question 4

Have you actually included jquery?

From what you have shown you haven't

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

needs including at top of the page in the

<head>

section

Question 5

It seems that jquery files are not included in this code.Please verify and if it is not included then add the code given below in head section of html page.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>