And how do I get it to display the number, not undefined?

It's a tipping app. The user inputs the price of whatever it is they bought (pizza, haircut, etc.) in `#price`, then `calcTip()` calculates the tip, sends it over to `calcTotal()` which calculates the total, and sends it over to `displayAmounts()`.

I don't know exactly what happens, but something messes up with the variable `tip`. `calcTip()` works correctly and calculates the tip amount successfully. I know this because the JavaScript console displays the amount when I input `tip;`. However, on the page, `#tipSpan` displays the tip as undefined.

What baffles me most is that the variable `total` works perfectly fine.

Does anyone know what might be going on or how I can fix it?

Here is the HTML:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tipping App</title>
    <style>
        <!-- Temporary -->
        #error {
            display: none;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            <h1>Tipping App</h1>
        </header>

        <section>
            <div class="price">
                <h2>Price Information</h2>
                <label for="priceInput">Enter the price below!</label><input id="priceInput" type="text"><button id="calcButton">Calculate the Tip</button>
                <p id="error">Error: You need to enter the cost!<br><br>Use only numbers and decimal points, no currency symbols or letters.</p>
            </div>

            <div id="tipContainer" class="tip">
                <h2>Tip Information</h2>
                <p id="tipPara">Your tip should be... <span>$<span id="tipSpan"></span></span></p>
            </div>

            <div id="totalContainer" class="total">
                <h2>Total Information</h2>
                <p id="totalPara">Your total is... <span>$<span id="totalSpan"></span></span></p>
            </div>
        </section>
    </div>

<script src="js/app.js"></script>

</body>
</html>

```

Here is the JavaScript:

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

```

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.