Why is parseInt not working for me?

Question

No matter what I try I get NAN when I try to parse an input value into a variable. I am trying to make a calculator to determine fuel economy.

<!DOCTYPE html> <html> <head> <title>Fuel Calculator</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="Demo project"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <style type="text/css"></style> </head> <body> <div class="wrapper"> <h1>Fuel Usage</h1> <div class="row"> <div class="col-md-12"> <form> <div class="form-group"> <label>Miles Driven Per Year</label> <input type="text" class="form-control" id="mpy"> </div> <div class="form-group"> <label>MPG</label> <input type="text" class="form-control" id="mpg"> </div> <p>Gallons Used: <span id="used"></span</p> <div class="form-group"> </div> <button id="submit" type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="main.js" type="text/javascript"></script> </body> </html>

js file

var mpy = parseInt($('#mpy').val(), 10); var mpg = parseInt($('#mpg').val(), 10); var gallonsUsed = mpy/mpg; $('#submit').click(function(){ $('#used').text(gallonsUsed); });

What values do you get for $('#mpy').val() and $('#mpg').val()? — Mike Cluck
– Mike Cluck, Commented Jan 27, 2016 at 22:47
If that JS code is everything you have in your JS file, You need to wrap it in $.ready() jquery call ... basically wait for the DOM to be ready — leo.fcx
– leo.fcx, Commented Jan 27, 2016 at 22:48
the code runs on page load, on page load the fields are blank, parseInt('') == NaN — Jaromanda X
– Jaromanda X, Commented Jan 27, 2016 at 22:49

DinoMyte · Accepted Answer · 2016-01-27 22:56:56Z

Since you have the input fields declared globally, the initial value in the text value is empty. So the result of parseInt would give you a NAN value.
You need to calculate the parsed values once you invoke the click event.

$('#submit').click(function(e){ var mpy = parseInt($('#mpy').val(), 10); var mpg = parseInt($('#mpg').val(), 10); var gallonsUsed = mpy/mpg; $('#used').text(gallonsUsed); });

Working example : https://jsfiddle.net/DinoMyte/b9bhs4s3/

Jaromanda X · Accepted Answer · 2016-01-27 22:49:41Z

The way you have your code, mpy/mpg/gallonsUsed are all calculated when the page is loaded (before any user input can even take place)

Your code would make more sense like this

$('#submit').click(function(){ var mpy = parseInt($('#mpy').val(), 10); var mpg = parseInt($('#mpg').val(), 10); var gallonsUsed = mpy/mpg; $('#used').text(gallonsUsed); });

So that the calculation is done once user has entered data and hit submit

Collectives™ on Stack Overflow

Why is parseInt not working for me?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related