Question

所以我试图让用户输入两个数字，然后单击一个按钮来运行JS功能并在页面上显示结果。但是，当我运行代码时，它会回吐

NaN

我该如何解决这个问题？有没有办法让我在网页上显示提示？

我的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>

我的JS：

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

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

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

我的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;

}

任何帮助将不胜感激。如果显示的值可以在css中自定义，那也很好。

Answer 1

  else{ // not the first node
    ListNode<E> temp = head;
    while(temp.next != null){ // find the last node
        temp = temp.next;
    }

    // create new node to be added to linked list
    ListNode<E> newNode = new ListNode<E>();
    newNode.data = e;
    newNode.next = null;

    // set the previous last node to the new, created node
    temp.next = newNode;

    size++; //increment size of the LinkedList
}

function addTogether() {
var taxValue = parseInt(document.getElementById("tax_per").value);

var meal__Cost = parseInt(document.getElementById("meal__cost").value);

    document.write(taxValue * meal__Cost);
}

您需要将其解析为Integer或Float，因为您正在操作的数据是字符串

<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>

如果您需要，也可以使用parseFloat

Answer 2

您对变量名称大小写错误，并且必须在用户单击按钮时检索该值：

<!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 个答案: