CODEWITHSUNDEEP
javascripthtmlcssdocument.write
user8739422
user8739422

Reputation:

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

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.

Upvotes: 0

Views: 71

Answers (2)

Yu Jiaao
Yu Jiaao

Reputation: 4714

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>

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15913

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

Upvotes: 1

Related Questions