title: Getting null values when outputting differences from a dropdown menu? (Javascript)
body: <p>I am looking to build a simple nutrition calculator that takes the difference between one food and another food, then outputs the differences in nutritional facts. Two things I'm having trouble figuring out:</p>
  
  <ol>
  <li>The code seems to work fine, but when I increase the quantity it returns NaN values and sometimes just calculates it as 0. </li>
  <li>The code is only able to use the first textbox to link values (both food items use values from the first textbox, so changing values in the second textbox won't do anything), and I haven't been able to figure out how to calculate the difference between the units in the first textbox and the units in the other textbox. Do I have to create an identical function for the second food item?  </li>
  </ol>
  
  <p>Code I have so far: </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>var stocks = [
    ["Beef (80/20) raw","oz",115.4451262,2.094125,1.199617347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
    ["Beef (90/10) raw","oz",115.4451262,2.094125,1.199617347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
    ["Chicken breast","oz",32.39053977,0.320375,0.07197704082,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
    ["Chicken thighs/legs","oz",32.39053977,0.320375,0.07197704082,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
    ["Milk (whole)","fl oz",7.638924987,0.146025,0.0002099330357,19,0.96,0.99,1.54,0.569,13,0.000000357142857142857,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
    ["Milk (2%)","fl oz",7.638924987,0.06112164455,0.0002099330357,15,1.06,0.58,1.54,0.363,16,2,0.000000357142857142857,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
    ["Pizza (cheese)","slice",42,0.9700347449,0.006297991071,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
    ["Ice Cream","cup",32.59312,0.6168324833,0.002345956329,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
    ["Milk (skim)","fl oz",7.638924987,0.05927058824,0.0002099330357,10,1.03,0.02,1.54,0.017,13,1,0.000000357142857142857,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
    ["Eggs (large)","each",43.13341461,0.514206,0.007354326122,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
    ["Lamb","oz",78.125,2.8105,1.199617347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
    ["Cheese (hard)","slice (oz)",37.44571072,1.35025,0.002099330357,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
    ["Yogurt","oz",5.833333333,0.09375,0.0002099330357,17,0.98,0.92,1.32,0.595,13,4,0.000000357142857142857,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
    ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08232711306,0.0005248325893,22,2.45,0.05,1.01,0.038,10,1,0.000000892857142857143,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
    ["Chocolate","oz",127.316,0.1862906,0.00004198660714,151,2.16,8.39,14.57,5.238,22,7,0.0000000714285714285714,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
    ["Cacao","oz",179.739,0.625,0,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
    ["Salmon (farmed)","oz",0.498125,0.56925,0,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
    ["Tuna (canned in oil)","oz",0.498125,0.1197485281,0,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
    ["Mayo","oz",14.41309121,0.121875,0.001838581531,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
    ["Pulled Pork raw","oz",44.84498316,0.63525,0.1411314526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
    ["Butter (salted)","oz",41.58720633,0.5875,0.00440859375,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
    ["Soy Burger","oz",21.8,0.048125,0,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
    ["Vegan Nuggets (soy)","oz",21.8,0.048125,0,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
    ["Soymilk (original)","fl oz",2.319532348,0.02445449777,0,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
    ["Tofu","oz",25.25,0.09625,0,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
    ["Tempeh","oz",12.383064,0.0230998152,0,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
    ["Mixed Nuts","oz",18.72285536,0.18425,0,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
    ["Bread","slice",9.735884788,0.1530147137,0,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
    ["Lentils","oz",30.3684714,0.07425,0,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
    ["Black Beans","oz",30.3684714,0.141625,0,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
    ["Tomato Sauce","oz",3.13704,0.09375,0,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
    ["Pinto Beans","oz",30.3684714,0.141625,0,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
    ["French Fries","oz",2.9337142,0.0417335921,0,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
    ["Peanut Butter","oz",36,0.2145,0,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
    ["Olive Oil","oz",21.77842536,0.2306145384,0,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
    ["Banana","1 medium",6.440662244,0.1763699536,0,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
    ["Mixed vegetables","oz",2.41150377,0.125,0,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
    ["Nutritional Yeast","g",0.08506329224,0.00706361088,0,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
    ["Rice (white)","oz",25.46308329,0.34375,0,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
    ["Potatoes","oz",1.872285536,0.03575,0,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
    ["Vegetable Oil","oz",17.70433203,0.125,0,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
    ["Wheat (flour)","1/4 cup",10.11034189,0.03087703323,0,102,3.39,0.47,0.09,0.069,1,0,0,0,0,0.3995205753,0.007668804863,1  ],
    ["Margarine","oz",9.915624199,0.06125,0,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
    ["Corn Syrup","fl oz",11.15931776,0.01728062914,0,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
    ["Sugar","oz",11.23371322,0.01503093504,0,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
    ["Corn (grain)","oz",6.74022793,0.0104375,0,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
    ["Soda","fl oz",10.64647779,0.02494335117,0,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
  ]
  
  function Stock (data) {
    return {
      name: data[0],
      servingUnit: data[1],
      calories: [data[5], ''],
      protein: [data[6], 'g'],
      fat: [data[7], 'g'],
      saturatedFat: [data[8], 'g'],
      sugar: [data[9], 'g'],
      sodium: [data[10], 'mg'],
      cholesterol: [data[11], 'mg']
    }
  }
  
  stocks = stocks.map(Stock)
  
  var $selects = $('.selectStock')
  var $quantity = $('#numberOfStocks')
  var $comparisonResult = $('.comparison .result')
  
  $selects.each(function() {
    $(this).append(stocks.map(function(stock, i) {
      return new Option(stock.name, i)
    }))
  })
  
  function format(data, multiplier, digits) {
    data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString()
    return data.join(' ')
  }
  
  function stockFacts(stock, quantity) {
    return [
      format(stock.calories, quantity, 2) + ' calories&lt;br&gt;' +
      format(stock.protein, quantity, 2) + ' of protein&lt;br&gt;' +
      format(stock.fat, quantity, 3) + ' of fat&lt;br&gt;' +
      format(stock.saturatedFat, quantity, 2) + ' of saturated fat&lt;br&gt;' +
      format(stock.sugar, quantity, 2) + ' of sugar&lt;br&gt;' +
      format(stock.sodium, quantity, 2) + ' of sodium&lt;br&gt;' +
      format(stock.cholesterol, quantity, 2) + ' of cholesterol&lt;br&gt;'
    ]
  }
  
  $selects.add($quantity).on('input', updateAmount)
  
  function getStock (select) {
    return stocks[+select.value]
  }
  
  function updateAmount() {
    var quantity = +$quantity.val()
    
    // Not sure what this line was supposed to do
    if (quantity &lt; 0) quantity = stock[17]
      
    $selects.each(function() {
      var $result = $(this).nextAll('.result').empty()
      var $amount = $(this).prev().find('.servingUnit').empty()
      var stock = getStock(this)
      if (!stock) return
      
      $amount.text(' (' + quantity + ' ' + stock.servingUnit + ')')
      
      $result.html(stockFacts(stock, quantity))
    })
    
    var selectedStocks = [].map.call($selects, getStock)
    $comparisonResult.empty()
    if (!selectedStocks[0] || !selectedStocks[1]) return
    var diff = {}
    Object.keys(selectedStocks[0]).forEach(function (k) {
      if (/^(name|servingUnit)$/.test(k)) return
      var first = selectedStocks[0][k]
      var second = selectedStocks[1][k]
      diff[k] = [Math.abs(first[0] - second[0]), first[1], first &gt; second ? 'more' : 'less']
    })
    $comparisonResult.html(stockFacts(diff, quantity))
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .side {
    float:left;
    margin: 0.5%;
    width: 33%;
    
  }
  .sideone {
    float:middle;
    margin: 0.5%;
    width: 33%;
    position:relative;
    clear:both;
  }
  .mid {
    float:middle;
    margin: 0.5%;
    width: 33%;
  }
  .comparison {
    float:right;
    width:66%;
    position:relative;
    display: inline-block;
  }</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;head&gt;
    &lt;meta name="viewport" content="width=10px, initial-scale=1.0"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;label&gt;
      &lt;div class = "side"&gt;
      Amount:
      &lt;input type="number" id="numberOfStocks" value="1" min="0" /&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
    &lt;/label&gt;
  
    &lt;div&gt;
      &lt;div class="sideone"&gt;
        &lt;h2&gt;First Item&lt;span class="servingUnit"&gt;&lt;/span&gt;:&lt;/h2&gt;
        &lt;select class="selectStock"&gt;
          &lt;option value="-1"&gt;Pick a food!&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;label&gt;
      &lt;div class = "side"&gt;
        Amount:
      &lt;input type="number" id="numberOfStocks" value="1" min="0" /&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
    &lt;/label&gt;
      &lt;div class="sideone"&gt;
        &lt;h2&gt;Second Item&lt;span class="servingUnit"&gt;&lt;/span&gt;:&lt;/h2&gt;
        &lt;select class="selectStock"&gt;
          &lt;option value="-1"&gt;Pick a food!&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/div&gt;
      &lt;div class="comparison side"&gt;
        &lt;h2&gt;Comparison:&lt;/h2&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div class="result"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Really appreciate help/guidance on this. Thanks a bunch!</p>