Max de Mooij Max de Mooij - 1 month ago 11
jQuery Question

jQuery Ignore Undefined variable

I'm making an advice tool that works on adding up variables in jQuery.

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

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.

I converted a short version of my code to a jsfiddle to demonstrate the problem:



// 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);
});

.question div {
background-color: #f4f4f4;
padding: 5px;
cursor: pointer;
width: 50px;
margin-top: 5px;
}

.health {
display: block;
clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Shows health -->
<span class="health"></span>
<span class="fat"></span>

<!-- Questions & Answers -->
<div class="question">
<h2>Do you run?</h2>
<div data-health="1">Yes</div>
<div>No</div>
</div>

<div class="question">
<h2>Do you eat fruit?</h2>
<div data-health="1">Yes</div>
<div>No</div>
</div>

<div class="question">
<h2>Do you eat chips?</h2>
<div data-fat="1">Yes</div>
<div>No</div>
</div>





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 :-)

Answer

You can use OR || operator like this works:

var gather_health = $(this).attr("data-health") || 0; // or "" or any default set

// 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") || 0;//<=== if attribute value is NaN set value to be 0
  var gather_fat = $(this).attr("data-fat") || 0;//the same here
  
  // 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);
});
.question div {
  background-color: #f4f4f4;
  padding: 5px;
  cursor: pointer;
  width: 50px;
  margin-top: 5px;
}

.health {
  display: block;
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Shows health -->
<span class="health"></span>
<span class="fat"></span>

<!-- Questions & Answers -->
<div class="question">
  <h2>Do you run?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat fruit?</h2>
  <div data-health="1">Yes</div>
  <div>No</div>
</div>

<div class="question">
  <h2>Do you eat chips?</h2>
  <div data-fat="1">Yes</div>
  <div>No</div>
</div>

Comments