Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Matthew Beiswenger
Matthew Beiswenger
6,814 Points

Input is returning a zero

I'm trying to do a little practicing on my own, combining elements of Jon Duckett's JavaScript and JQuery book with those of Treehouse's JavaScript Basics track. Basically the program allows someone to type in text and see how much it would cost to make a sign with that text.

When I try to copy the text from the input element and place it next to custom sign, my input.value returns a zero. Any help would be greatly appreciated with figuring this out

HTML:

<html>
    <head>
        <title>Duckett Chapter 2 Example</title>
        <link href="styles.css" rel="stylesheet "type="text/css" >
    </head>
    <body>
        <h2 id="greeting">Howdy Molly, please check your order: </h2>
        <div>
          <ul id="left-col">
            <li><span>Custom Sign: </span> </li>
            <li><span>Total Tiles: </span></li>
            <li><span>Subtotal: </span></li>
            <li><span>Shipping: </span></li>
            <li><span>Grand Total: </span></li>
          </ul>
          <ul id="right-col">
            <li id="customSign">Montague Hotel</li>
            <li id="totalTiles">14</li>
            <li id="subtotal">$70</li>
            <li id="shipping">$7</li>
            <li id="grandTotal">$77</li>
          </ul>
            <div id="input-form">
                <input id="textInput" type="text">
                <button id="myButton">Calculate</button>  
            </div>  
        </div>
    <script src="scripts.js"></script>
    </body>
</html>

JAVASCRIPT:

var btnCalc = document.getElementById('myButton');
// Here's where I have the issue
var textInput = document.getElementById('textInput').value;

var customSign = document.getElementById('customSign');
var totalTiles = textInput.length;
var subtotal = totalTiles * 5;
var shipping = 7;
var grandTotal = subtotal + shipping;

btnCalc.addEventListener('click', Calculate);

function Calculate() {

    // and here
    document.getElementById('customSign').innerHTML = textInput;

    document.getElementById('totalTiles').textContent = totalTiles;

    document.getElementById('subtotal').textContent = subtotal;

    document.getElementById('shipping').textContent = shipping;

    document.getElementById('grandTotal').textContent = grandTotal;
}

CSS (although I don't think it's relevant):

h2 {
  text-align: center;
}

span {
  font-weight: bold;
}

div {
  margin: 0 auto;
  width: 400px;
  overflow: auto;
}

ul {
  list-style-type: none;
}

#right-col {
  float: right;
}

#left-col {
  float:left;
}

#input-form {
    text-align: center;
}

1 Answer

Steven Parker
Steven Parker
216,083 Points

You don't get the current input box value.

When the page is first loaded, you assign the variable textInput to what's currently in the box. At that point, it's empty. Then when the button is clicked you transfer that empty string to the customSign element.

For what you're trying to do, I think you'll want to sample the input fresh when the button is clicked. And also remember to convert the string into a number if you plan to do any calculations on it. And of course, the calculations would also need to be done inside the click handler.