title: Why is JavaScript correctly calculating my variable yet displays it as undefined in the HTML?
body: <p>And how do I get it to display the number, not undefined?</p>
  
  <p>It's a tipping app. The user inputs the price of whatever it is they bought (pizza, haircut, etc.) in <code>#price</code>, then <code>calcTip()</code> calculates the tip, sends it over to <code>calcTotal()</code> which calculates the total, and sends it over to <code>displayAmounts()</code>.</p>
  
  <p>I don't know exactly what happens, but something messes up with the variable <code>tip</code>. <code>calcTip()</code> works correctly and calculates the tip amount successfully. I know this because the JavaScript console displays the amount when I input <code>tip;</code>. However, on the page, <code>#tipSpan</code> displays the tip as undefined.</p>
  
  <p>What baffles me most is that the variable <code>total</code> works perfectly fine.</p>
  
  <p>Does anyone know what might be going on or how I can fix it?</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Tipping App&lt;/title&gt;
      &lt;style&gt;
          &lt;!-- Temporary --&gt;
          #error {
              display: none;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;
              &lt;h1&gt;Tipping App&lt;/h1&gt;
          &lt;/header&gt;
  
          &lt;section&gt;
              &lt;div class="price"&gt;
                  &lt;h2&gt;Price Information&lt;/h2&gt;
                  &lt;label for="priceInput"&gt;Enter the price below!&lt;/label&gt;&lt;input id="priceInput" type="text"&gt;&lt;button id="calcButton"&gt;Calculate the Tip&lt;/button&gt;
                  &lt;p id="error"&gt;Error: You need to enter the cost!&lt;br&gt;&lt;br&gt;Use only numbers and decimal points, no currency symbols or letters.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div id="tipContainer" class="tip"&gt;
                  &lt;h2&gt;Tip Information&lt;/h2&gt;
                  &lt;p id="tipPara"&gt;Your tip should be... &lt;span&gt;$&lt;span id="tipSpan"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div id="totalContainer" class="total"&gt;
                  &lt;h2&gt;Total Information&lt;/h2&gt;
                  &lt;p id="totalPara"&gt;Your total is... &lt;span&gt;$&lt;span id="totalSpan"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the JavaScript:</p>
  
  <pre><code>///// VARIABLES
  //////////////////////////////
  
  var priceInput = document.getElementById("priceInput");
  var calcButton = document.getElementById("calcButton");
  var error = document.getElementById("error");
  var tipContainer = document.getElementById("tipContainer");
  var tipPara = document.getElementById("tipPara");
  var tipSpan = document.getElementById("tipSpan");
  var totalContainer = document.getElementById("totalContainer");
  var totalPara = document.getElementById("totalPara");
  var totalSpan = document.getElementById("totalSpan");
  
  var tip;
  var total;
  
  ///// FUNCTIONS
  //////////////////////////////
  
  function calcTip() {
      var price = priceInput.value; // This is the price the user inputs
      var minTip = (Math.ceil(price * .15)); // Calculates a 15% tip rounded up to the nearest dollar
      var maxTip = (price * .2); // Calculates a 20% tip
  
      if (isNaN(price) || price === "") {
          // If the user doesn't enter a number
          // Or doesn't enter anything,
          // Then display the error message
          error.style.display = "block";
          return;
      } else {
          error.style.display = "none";
          if (maxTip &lt; minTip) {
              // If the 20% tip is less than the 15% rounded tip,
              // Then let's go with that 20% tip
              calcTotal(price, maxTip);
              tip = maxTip;
          } else {
              // Otherwise, let's just do the 15%
              calcTotal(price, minTip);
              tip = minTip;
          };
      };
  };
  
  function calcTotal(price, tip) {
      // Add the price and the tip together to yield the total
      price = parseInt(price);
      tip = parseInt(tip);
      total = (price + tip);
      displayAmounts();
  }
  
  function displayAmounts() {
      // Update the page to display the tip and the total to the user
      tipContainer.style.display = "block";
      totalContainer.style.display = "block";
      tipSpan.innerText = tip;
      totalSpan.innerText = total;
  }
  
  ///// EVENTS
  //////////////////////////////
  
  calcButton.addEventListener("click", calcTip);
  </code></pre>
  
  <p>Also, unrelated, but does my JavaScript look good? Is it clean code? I hope to find a web development job in the near future, and I know I need to be good at JavaScript.</p>