Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Greg Schudel
Greg Schudel
4,090 Points
Posted by Greg Schudel
Greg Schudel
4,090 Points

Cannot get JS form to add two values (NOT MY HOMEWORK)

I am new to javascript and moving from learning about it from the tutorials to creating apps on my own (they are not web apps, per say ;) ).

Below is a simple form where I am trying to allow the user to place two separate numerical inputs and then have the app add them when you click a button.

The issue is I keep on getting a "zero" for the output. Not sure why?

My code for the js file

let this_number = parseFloat(document.getElementById('firstInput').value, 10);

let plusThis = parseFloat(document.getElementById('secondInput').value, 10);

let submitButton = document.getElementById('submit');


submitButton.addEventListener( 'click', (event) => {

    let resultsDiv = document.getElementById('results')[0];

    let para = document.createElement("p");

    let resultsOfSubmit =  this_number + plusThis;

    results.appendChild(document.createTextNode(resultsOfSubmit));


});

HTML FILE

<!DOCTYPE html>
<html>
<head>
    <title>JS Cal Form Test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>





<body>
    <div id="wrap">
        <form action="" id="cakeform" onsubmit="return false;">

            <div class="cont_details">
                <fieldset>
                <legend>My Simple JS Cal Form</legend>
                <label for='this_number'>This Number</label>
                <input type="text" id="firstInput" value="0" name='firstInput' />
                <br/>
                <label for='plusThis'>Plus This</label>
                <input type="text" id="secondInput" value="0" name='secondInput' />
                <br/>
                <label for='equalsThis'>Equals This</label>
                <div id="results" name='results'> </div> <!-- why do we need the name and the id again? -->
                <br/>
                </fieldset>
            </div>
            <input type='submit' id='submit' value='submit' />
        </div>  
       </form>
    </div><!--End of wrap-->

</body>

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

</html>

4 Answers

Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

You're collecting the values for "this_number" and "plusThis" when the program first starts, before anything has been entered (and they are still 0 by default). This should be done inside the handler so you can get the values that are there when the button is pushed.

Also, your "script" tags should be inside the "body" element.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

I got it working!!!!! YES!!!

Is there a more "salty" way to write this?

let submitButton = document.getElementById('submit');


submitButton.addEventListener( 'click', (event) => {

    let this_number = parseFloat(document.getElementById('firstInput').value, 10);

    let plusThis = parseFloat(document.getElementById('secondInput').value, 10);

    let resultsDiv = document.getElementById('results')[0];

    let para = document.createElement("p");

    let resultsOfSubmit =  this_number + plusThis;

    results.appendChild(document.createTextNode(resultsOfSubmit));


});
Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

It doesn't look like "resultsDiv" or "para" are being used, those lines could be omitted. And "parseFloat" assumes base 10 if you omit the 2nd argument.

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Shouldn't I of used a createElement();??

Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

Right now, you create the element but never add it to the DOM. Maybe you're planning to add more code later to use it?

Greg Schudel
Greg Schudel
4,090 Points
Greg Schudel
Greg Schudel
4,090 Points

Right now, you create the element but never add it to the DOM. Maybe you're planning to add more code later to use it?

I don't understand what you mean? I have an appendChild method in there, that means it should work right? What do you mean add more code later?

Finally, I don't understand why the results variable isn't giving any errors, I haven;t defined it anywhere else, so it should give me an error right?

Here is what I have now

let submitButton = document.getElementById('submit');


submitButton.addEventListener( 'click', (event) => {



    let this_number = parseFloat(document.getElementById('firstInput').value, 10);

    let plusThis = parseFloat(document.getElementById('secondInput').value);

    let resultsOfSubmit =  this_number + plusThis;

    results.appendChild(document.createTextNode(resultsOfSubmit));


});
Steven Parker
Steven Parker
229,695 Points
Steven Parker
Steven Parker
229,695 Points

You mentioned using createElement, which you had done for "para". But you never added "para" using "appendChild". So I was guessing you might be thinking of using it for something later.

And since id's must be unique, browsers typically create references to elements with ids using the id as the name. So "results" was pre-defined for you by the browser. But it's not good practice to rely on this, it would be better to define it yourself.