title: jQuery Ignore Undefined variable
body: <p>I'm making an advice tool that works on adding up variables in jQuery.</p>
  
  <p>Some multiple choice answers have a specific data attribute, which needs to be saved to a specific variable. If the user clicks on the same data attribute later on, the value must be added up to the previous value (that's stored in a var).</p>
  
  <p>The problem: not every answer has a data attribute. Every time a user clicks on an answer without a data attribute, the variable changes to "Undefined" and it becomes unusable.</p>
  
  <p>I converted a short version of my code to a jsfiddle to demonstrate the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// The default is 0
  var count_health = 0;
  var count_fat = 0;
  
  $('.question div').click(function(){
    
    // I want to get the data from the answer
    var gather_health = $(this).attr("data-health");
    var gather_fat = $(this).attr("data-fat");
    
    // And add it up to the variable
    count_health = +count_health + +gather_health;
    count_fat = +count_fat + +gather_fat;
    
    // And show it
    $('.health').text('Your health is: ' + count_health);
    $('.fat').text('Your fat is: ' + count_fat);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.question div {
    background-color: #f4f4f4;
    padding: 5px;
    cursor: pointer;
    width: 50px;
    margin-top: 5px;
  }
  
  .health {
    display: block;
    clear: both;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Shows health --&gt;
  &lt;span class="health"&gt;&lt;/span&gt;
  &lt;span class="fat"&gt;&lt;/span&gt;
  
  &lt;!-- Questions &amp; Answers --&gt;
  &lt;div class="question"&gt;
    &lt;h2&gt;Do you run?&lt;/h2&gt;
    &lt;div data-health="1"&gt;Yes&lt;/div&gt;
    &lt;div&gt;No&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="question"&gt;
    &lt;h2&gt;Do you eat fruit?&lt;/h2&gt;
    &lt;div data-health="1"&gt;Yes&lt;/div&gt;
    &lt;div&gt;No&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="question"&gt;
    &lt;h2&gt;Do you eat chips?&lt;/h2&gt;
    &lt;div data-fat="1"&gt;Yes&lt;/div&gt;
    &lt;div&gt;No&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't know if there's a more efficient way to calculate the variables. If you know one, I'd be happy to see it! But please be gentle, I'm not a jQuery wizzard like you guys :-)</p>