jQuery calculating seconds of life

Question

I'm kinda new to this and I'm trying to do a simple calculation in jQuery, but it doesn't work. Can someone help me please? Thank you, This is my improved code, i added your tips, but still doesn't work (doesn't do anything):

    <!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>

When you say it doesn't work - do you get an error or unexpected behaviour? Please add details — geedubb, Jan 05 '14 at 10:56
Ha sorry, i click the submit bottun and nothing happens. Thank you — Miguel, Jan 05 '14 at 10:57
@user3162303: To improve your question, use the "edit" link, not comments. — T.J. Crowder, Jan 05 '14 at 11:02

T.J. Crowder · Answer 1 · 2014-01-05T11:09:39.540

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.

geedubb · Answer 2 · 2014-01-05T11:15:01.370

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

score 0 · Answer 3 · answered Jan 05 '14 at 11:03

0

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

answered Jan 05 '14 at 11:03

GrahamTheDev

22,724
2
32
64

score 0 · Answer 4 · answered Jan 05 '14 at 11:06

0

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>

answered Jan 05 '14 at 11:06

Innovation

1,514
17
32

score 0 · Accepted Answer · answered Jan 05 '14 at 11:09

<!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)

jQuery calculating seconds of life

5 Answers5