CODEWITHSUNDEEP
javascriptjqueryhtmlcssnan
Pbalazs89
Pbalazs89

Reputation: 168

NaN Issue - Unable to display number in Jquery

Happy new year everyone! So I'm building a Calorie Calculator and I'm having a slight issue.

I have basically 4 Variables that I want to sum up and display:

  1. Total Calories #total
  2. Carbs
  3. Fats
  4. Proteins

I'm successful in 2/3/4, however, I get an error for 1. Can't figure out why. Only the "main dish" part of the calculator works, so please click on it, and then the "bases" will roll down. Once you select a menu item from there, you'll see the issue.

Also, this is not a must but would be appreciated, I would like to place a + sign overlay on the menu items when you hover over their image right in the middle. I can't seem to get it right with CSS. If any veterans have an idea that would be appreciated. (I was playing around with the position and top properties but I couldn't get it right)

So here's the code:

<!DOCTYPE html>
<html>

<head>
  <title>Padthai calc</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


  <div class="content">
    <h1>PADTHAI CALORIE CALCULATOR</h1>
    <h2>Select a meal to begin your calculation</h2>


  <ul id="menuitems">
    <li><button id="maindish"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span class="bigtext">Main Dish</span></button></li>
    <li><button id="soups"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span class="bigtext">Soup</span></button></li>
    <li><button id="teas"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/oktoberhat05.jpg'><span class="bigtext">Teas</span></button></li>
    <li><button id="desserts"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/IMG_5968-6.jpg'><span class="bigtext">Desserts</span></button></li>
  </ul>

  <div>


  </div>

  <div id="contenttable">
    <div class="maindish">
      <h1>Main Dish</h1>
      <hr>

      <table>
          <th>Bases</th>

          <td><button class="base ingredient container" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8" vegetarian glutenfree weightloss lactosefree vegan><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span style="smalltext">Rice Noodle</span></button></td>

          <td><button class="base ingredient container" ata-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8" vegetarian lactosefree><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Egg Noodle</button></td>

          <td><button class="base ingredient container" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" vegetarian lactosefree vegan><img  class="image"src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Vermicelli</button></td>

          <td><button class="base ingredient container" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" vegetarian lactosefree vegan><img  class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Whole Grain Noodle</button></td>

          <td><button class="base ingredient container" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" vegetarian><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>White Rice</button></td>

          <td><button class="base ingredient container" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" glutenfree vegetarian><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Brown Rice</button></td>

          <td><button class="base ingredient container" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" glutenfree vegetarian lactosefree vegan><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Vegetable Base</button></td>

      </table>
    </div>



<div class="soups">
    <h1>Soups</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>
    <div class="teas">
    <h1>Teas</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>  
    <div class="desserts">
      <h1>Desserts</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>


    </div>
   </div>
  </div>
</body>

</html>


<style>

</style>

<div class="footer2">
  <div id="total">Total</div>
  </div>


<footer class="footer">
  <div class="summary">
  <table>

<div id="totalCalories">Total Calories: <span id="total"></span></div>  
<div id="totalCalories1">





        <tr>
          <th>Total Carbs: </th>
          <th>Total Fat: </th>
          <th>Total Protein: </div></th>
        </tr>
        <tr>
          <td class="bigtext"><span id="totalCarbs">0</span> G</td>
          <td class="bigtext"><span id="totalFats">0</span> G</td>
          <td class="bigtext"><span id="totalProteins">0</span> G</td>
    </div>
        </tr>
  </table>

</footer>


</body>


</html>

and the css

html {
  height: 100%;
}

#contenttable {min-height:100%; height:100%}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Avoid the IE 10-11 `min-height` bug. */
}

.content {
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/b2317ea3.png');
  flex: 1 0 auto;
  min-height:1000px;

}

.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 40px;
  height:20%;
  position: fixed;
  width:100%;
  bottom: 0;
}

.footer2 {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  padding-left: 40px;
  height:10%;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/da9cc825.png');
    position: fixed;
    bottom: 20%;
    width:100%;
}


button {background: none; color: #424040; border-radius:0px;border:none; font-family: "Lithos Pro"; margin: auto auto;cursor:pointer;}

.base .ingredient .container  {font-size:1.2em;}




button p {margin: auto auto;}

h1, h2 {font-family: "Lithos Pro"; text-align:center; margin: 0 0 20px 0; color: #424040}

a {
  text-decoration: none;
  color: white;
}

* {
  box-sizing: border-box;
}


p {
  margin: 0 0 20px 0;
}

footer {
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/c4b0e511.png');
  color: white;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  float:left; 
  margin:1em auto;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  font-family:lithos pro;

}

th {font-size:0.8em;}

tr:nth-child(even) {
  background-color: #dddddd;
}

ul,
li {
  text-decoration: none;
  list-style: none;
  margin: 3%;
  margin-bottom: 5%;
  width: auto;
}

.maindish, .soups, .desserts, .teas ,.summary {max-width:70%; margin:0 auto; display:block; height:100%; min-height: 600px;}

img {
  width:130px; height:120px; margin:0 auto; display:block;border-radius: 50%; padding: 5px;

}

#menuitems {
  display: flex;
  width: auto;
  margin: 0%;
  margin-bottom: 2%;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/b2317ea3.png')
  }

#total, #carbs {color:white; font-size:1.7em;}

/* Hover Animacio */

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;

}

.middle {
  position: absolute;
  transition: .5s ease;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.clicked {  

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: #6FC0BB;
}

.bigtext {font-size: 1.3em !important;}
.smalltext {font-size: 0.45em;}
#totalCalories {font-size:1.5em; font-family: "lithos pro"}

and the js

// if ($(".maindish, .soups, .desserts, .teas").is(":visible")) {
//
// }

$(".maindish, .soups, .desserts, .teas").hide();

//Main dish

$("#maindish").click(function() {
  var visibility = $(".maindish").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  //$(".soup, .desserts, .teas").hide();
  $(".maindish").slideToggle("fast");
  $(".soups, .desserts, .teas").slideUp();
});

//soup

$("#soups").click(function() {
  var visibility = $(".soups").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .desserts, .teas").slideUp();
  $(".soups").slideToggle("fast");
});

//teas

$("#teas").click(function() {
  var visibility = $(".teas").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .desserts, .soups").slideUp();
  $(".teas").slideToggle("fast");
});

//desszerts

$("#desserts").click(function() {
  var visibility = $(".desserts").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .teas, .soups").slideUp();
  $(".desserts").slideToggle("fast");
});


$(document).ready(function() {
  $(".ingredient").click(function() {
    var calories = $(this).data("calories");
    var carbs = $(this).data("carbs");
    var fat = $(this).data("fat");
    var proteins = $(this).data("proteins");
    var totalNum = $("#total");
    var totalCarbs = $("#totalCarbs");
    var totalFats = $("#totalFats");
    var totalProteins = $("#totalProteins");
    var currentCalories = +totalNum.html();
    var currentCarbs = +totalCarbs.html();
    var currentFats = +totalFats.html();
    var currentProteins = +totalProteins.html();
    var pressed = $(this).hasClass("clicked");

    if (pressed) {
      $(this).removeClass("clicked");
      totalNum.text(+(currentCalories - calories).toFixed(1));
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));
    } else {
      $(this).addClass("clicked");
      totalNum.text(+(currentCalories + calories).toFixed(1));
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
      totalFats.text(+(currentFats + fat).toFixed(1));
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    };

  });

});

Oh and to make it easier, here it is in Codepen:

https://codepen.io/Pbalazs89/full/eyGXeN

Upvotes: 1

Views: 1744

Answers (3)

esco_448
esco_448

Reputation: 1

Got same issue in my code and fixed it by using 'on' method instead of directly using 'click'.

Upvotes: 0

srmeile
srmeile

Reputation: 468

The problem is when your program first runs it sets currentCalories variable to "Total" 

var totalNum = $("#total");
totalNum.html();

which becomes "Total" since the text is Total

<div id="total">Total</div>

should be

<div id="total">0</div>

Upvotes: 0

Calvin Nunes
Calvin Nunes

Reputation: 6516

I added a check to see if the currentCalories is number or not, if not, then make it become a 0, with that, you don't start with "total" as currentCalories:

$(document).ready(function() {
  $(".ingredient").click(function() {
    var calories = $(this).data("calories");
    var carbs = $(this).data("carbs");
    var fat = $(this).data("fat");
    var proteins = $(this).data("proteins");
    var totalNum = $("#total");
    var totalCarbs = $("#totalCarbs");
    var totalFats = $("#totalFats");
    var totalProteins = $("#totalProteins");
    var currentCalories = +totalNum.html();
    var currentCarbs = +totalCarbs.html();
    var currentFats = +totalFats.html();
    var currentProteins = +totalProteins.html();
    var pressed = $(this).hasClass("clicked");

    if(isNaN(currentCalories)){
      currentCalories = 0;
    }

    if (pressed) {
      $(this).removeClass("clicked");
      totalNum.text(+(currentCalories - calories).toFixed(1));
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));
    } else {
      $(this).addClass("clicked");
      totalNum.text(+(currentCalories + calories).toFixed(1));
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
      totalFats.text(+(currentFats + fat).toFixed(1));
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    };

  });

I also suggest you to parse all values that will be in a sum/subtraction, just to make sure that all is really a number and if it's not, transform it to a zero, this will ensure no errors when calculating.

https://codepen.io/anon/pen/vpewJL

Upvotes: 1

Related Questions