Getting text input from <form> to use in JS function to display on page

Question

So I am trying to get the user to input two numbers, then click a button to run a JS function and display the result on the page. However, when I run the code, it spits back

NaN

How do I solve this problem? Is there a way I can get the tip to display on the web page?

My HTML:

<!DOCTYPE html>
<html>
    <head> 
        <title> Tip Calculator by Jonah </title>
        <div id = "links">
        <script src = "functions.js"></script>
        <link type = "text/css" rel = stylesheet href = "design.css">
        <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">

        </div>
    </head>
    <body>
        <div id = "cool_main">
        <h1 id = "title"> Tip Calculator </h1>
        <h2 id = "developer"> Developed by Jonah Johnson </h2>
        </div>
        <p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>

        <form id = "meal_cost">
        Meal Total Here :<br>
        <input type="text" id = "meal__cost" name="mealcost" /><br>
        </form>
        <form id = "tax_percent">
        Tax Here (in percent) :<br>
        <input type ="text" id = "tax_per" name="taxpercent" ><br>
        </form>
        <h4 id = "per"> % </h4>
        <button id = "getTip" onclick = "addTogether()"> OK </button>
    </body> 
</html>

My JS:

var taxValue = document.getElementById("tax_per").value;

var meal__Cost = document.getElementById("meal__cost").value;

function addTogether() {
    document.write(taxValue * meal__cost);
}

My CSS:

div {
position: relative;
left: -490px;
}



#title {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 225px;
padding: 10px 24px;
background-color: #dbdbcb;
border-radius: 4px;
box-shadow: 10px 10px 5px  #888888;
position: relative;
left: 531px;
font-size: 40px;
text-align: center;

}

#developer {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 300px;
padding : 5px 10px;
text-align: center;
background-color: #dbdbcb;
border-radius: 10px 10px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 510px;
}

#main_para {
border: 1px solid black;
width: 415px;
position: relative;
left: 0px;
font-family: "Bitter", sans-serif;
padding: 4px 10px;
background-color: #dbdbcb;
border-radius: 10px 10px;
}

#meal_cost {
    border: 0px solid black;
    width: 400px;
    height: 100px;
    padding: 10px 10px;
    text-align: center;
    font-family: "Bitter", sans-serif;
    background-color: #dbdbcb;
    box-shadow: 10px 10px 5px #888888;
    position: relative;
    left: 550px;
    bottom: 200px;  
    font-size: 40px;

}

#tax_percent {
    border: 0px solid black;
    width: 400px;
    padding: 10px 10px;
    text-align: center;
    font-family: "Bitter", sans-serif;
    font-size: 40px;
    background-color: #dbdbcb;
    position: relative;
    box-shadow: 10px 10px 5px #888888;
    left: 550px;
    bottom: 170px;
}

#per {
    position: relative;
    left: 856px;
    bottom: 226px;
    width: 10px;
    font-family: "Bitter", sans-serif;

}

Any help would be appreciated. It would also be good if the displayed value was customizable in css.

Tushar Gupta · Accepted Answer · 2017-10-31 00:01:55Z

1

function addTogether() {
var taxValue = parseInt(document.getElementById("tax_per").value);

var meal__Cost = parseInt(document.getElementById("meal__cost").value);

    document.write(taxValue * meal__Cost);
}

<div id = "cool_main">
        <h1 id = "title"> Tip Calculator </h1>
        <h2 id = "developer"> Developed by Jonah Johnson </h2>
        </div>
        <p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>

        <form id = "meal_cost">
        Meal Total Here :<br>
        <input type="text" id = "meal__cost" name="mealcost" /><br>
        </form>
        <form id = "tax_percent">
        Tax Here (in percent) :<br>
        <input type ="text" id = "tax_per" name="taxpercent" ><br>
        </form>
        <h4 id = "per"> % </h4>
        <button id = "getTip" onclick = "addTogether()"> OK </button>

You need to parse it into Integer or Float, as the data you are manipulating is string

var taxValue = parseInt(document.getElementById("tax_per").value);

var meal__Cost = parseInt(document.getElementById("meal__cost").value);

You can use parseFloat as well if you reuire

edited Oct 31, 2017 at 0:01

answered Oct 30, 2017 at 23:56

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tushar Gupta Over a year ago

@Slasher yeah, the .value will give you string

Dirk Over a year ago

and you should get the values when you are submiting. so the function add to gether on click should pull the values, parse to float or integer gepending on what you intend and add them, then display them

Tushar Gupta Over a year ago

@Slasher its because, you have used the wrong variable name, be aware of the case meal__Cost. Also I have placed a working snippet

Tushar Gupta Over a year ago

@Slasher check the snippet I have created, and please work on your logics :)

user8739422 Over a year ago

The problem is that when the user inputs the tax, they have to add a period in front of the number to have it as a tax. So how are you able to add that without getting an error?

|

Yu Jiaao · Accepted Answer · 2017-10-31 00:12:49Z

1

You wrong with variable name case and you must retrieve the value when user clicks the button:

<!DOCTYPE html>
<html>
    <head> 
        <title> Tip Calculator by Jonah </title>

    </head>
    <body>
        <div id = "cool_main">
        <h1 id = "title"> Tip Calculator </h1>
        <h2 id = "developer"> Developed by Jonah Johnson </h2>
        </div>
        <p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>

        <form id = "meal_cost">
        Meal Total Here :<br>
        <input type="text" id = "meal__cost" name="mealcost" value="0" /><br>
        </form>
        <form id = "tax_percent">
        Tax Here (in percent) :<br>
        <input type ="text" id = "tax_per" name="taxpercent" value="0"><br>
        </form>
        <h4 id = "per"> % </h4>
        <button id = "getTip" onclick = "addTogether(); return false;"> OK </button>

        <div id = "links">

        </div>
        <script >

            function addTogether() {
                var taxValue = parseFloat(document.getElementById("tax_per").value);

                var meal__cost = parseFloat(document.getElementById("meal__cost").value);

                document.getElementById("links").innerHTML= taxValue * meal__cost;
                return false;
            }

        </script>


    </body> 
</html>

edited Oct 31, 2017 at 0:12

answered Oct 31, 2017 at 0:09

Yu Jiaao

4,7845 gold badges48 silver badges63 bronze badges

1 Comment

user8739422 Over a year ago

this does not display the final tax when the css sheet is added

Collectives™ on Stack Overflow

Getting text input from <form> to use in JS function to display on page

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related