从获取文本输入 <form> 在JS函数中使用以显示在页面上

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. 所以我试图让用户输入两个数字，然后单击一个按钮以运行JS函数并在页面上显示结果。 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: 我的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: 我的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: 我的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. 如果显示的值可以在css中自定义，那也很好。

Answer 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 您需要将其解析为Integer或Float，因为您要处理的数据是字符串

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 如果需要，也可以使用parseFloat

Answer 2

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>

从获取文本输入 <form> 在JS函数中使用以显示在页面上

问题描述

2 个解决方案

解决方案1
1 2017-10-30 23:56:43

解决方案2
1 2017-10-31 00:09:52

从获取文本输入 <form> 在JS函数中使用以显示在页面上

问题描述

2 个解决方案

解决方案1 1 2017-10-30 23:56:43

解决方案2 1 2017-10-31 00:09:52

解决方案1
1 2017-10-30 23:56:43

解决方案2
1 2017-10-31 00:09:52