okunato okunato - 6 months ago 30
HTML Question

parseFloat() returning NaN



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>

</head>
<body>

<style>
.form-control {
margin-bottom: 15px;
}
</style>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<h2 style="margin: 0px; padding: 0px;">Billing Calculator</h2>
</a>
</div>
</div>
</nav>

<div class="col-md-2">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
<input type="date" class="form-control date" placeholder="Search">
</div>
</form>
</div>

<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" id="one" placeholder="hours">
<input type="text" class="form-control" id="two" placeholder="hours">
<input type="text" class="form-control" id="three" placeholder="hours">
<input type="text" class="form-control" id="four" placeholder="hours">
<input type="text" class="form-control" id="five" placeholder="hours">
<input type="text" class="form-control" id="six" placeholder="hours">
<input type="text" class="form-control" id="seven" placeholder="hours">
<button type="submit" class="btn btn-default" id="click">Calculate</button>
</div>
</form>
</div>
<div class="col-md-1">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<label for="form-control">Total Hours:</label>
<label for="form-control" id="totalHours">.</label>
</div>
</form>
</div>
<script type="text/javascript">

var hoursOne = parseFloat(document.getElementById("one").value);

document.getElementById("click").onclick = function(){
alert(hoursOne);
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>





I'm trying to retrieve a number from a text input, it always alerts
NaN
even when I use
innerHTML
. The program is meant to be a billing calculator that takes in the amount of hours worked and returns the total hours. The Date's don't really have much to do with the values, but help the user keep track.

Answer
 <script type="text/javascript">             
    document.getElementById("click").onclick = function(){
        var hoursOne = parseFloat(document.getElementById("one").value);
        alert(hoursOne);    
    }
 </script>

Your code gets executed before filling the form. You need to get the data inside your function.