CODEWITHSUNDEEP
javascripthtml
okunato
okunato

Reputation: 63

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.

Upvotes: 2

Views: 3891

Answers (2)

RobG
RobG

Reputation: 147413

Reducing the clutter to just what matters, you have:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" id="one" placeholder="hours">
    <button type="submit" class="btn btn-default" id="click">Calculate</button>
  </div>
</form>
<script type="text/javascript">
  var hoursOne = parseFloat(document.getElementById("one").value); 
  document.getElementById("click").onclick = function(){
    alert(hoursOne);    
  }
</script>

So you are setting the value of hoursOne as the page loads and not resetting it to the current value of the input. So the value is "" (empty string) and parseFloat("") is NaN. What you need to do is get the value when the button is clicked.

Also, give the control a name so it can be successful, and a default value so that it will only return NaN if the use makes a mistake:

document.getElementById("click").onclick = function(){
  alert(parseFloat(parseFloat(this.form.hoursOne.value)));    
}
<form>
  <label for="one">Hours: 
    <input type="text" class="form-control" id="one" name="hoursOne" value="0">
  </label>
  <button type="button" id="click">parseFloat</button>
</form>

Lastly, you should never use a placeholder instead of a proper label with a hint on the format required. If you use a placeholder as a label, once the user has entered something, they can no longer see the label and don't know what the input is for anymore.

Upvotes: 0

mhyst
mhyst

Reputation: 297

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

Upvotes: 1

Related Questions