我如何停止未定义以停止在评分计算器中弹出

Question

我想创建一个评分计算器，我想知道一些事情。我有这个问题，每当我输入一个数字时，它就会显示为“未定义”。请帮忙。    <script>        function Calc() {            var grade = document.getElementById("grade");            var totalGrade = document.getElementById("totalGrade");            var gradePercentage = eval(grade/totalGrade)*100;            document.getElementById("result").innerHTML = gradePercentage.value + "%";        }    </script>    <input type = "text" id = "grade" style = "width:50" autocomplete = "off"> / <input type = "text" id = "totalGrade" style = "width:50" autocomplete = "off">        <br> <br>    <input type = "button" value = "Calculate" onClick = "Calc()">    <p id = "result" name = "r1"> </p></html>

Answer 1

有几个问题：

• document.getElementById("grade")仅获取 HTML 节点的输入值。

• 永远不要使用eval()真的很糟糕的事情可能会发生。

• parseInt()如果您获得了输入的价值而不是输入本身，它将起作用。

• gradePercentage没有value财产，它（应该是）一个数字。

function Calc() {

    var grade = parseInt(document.getElementById("grade").value);

    var totalGrade = parseInt(document.getElementById("totalGrade").value);

    var gradePercentage = 100*grade/totalGrade;

    document.getElementById("result").innerHTML = gradePercentage + "%";

}

<input type = "text" id = "grade" style = "width:50" autocomplete = "off"> / <input type = "text" id = "totalGrade" style = "width:50" autocomplete = "off">

<br> <br>

<input type = "button" value = "Calculate" onClick = "Calc()">

<p id = "result" name = "r1"> </p>

Answer 2

你应该注意getElementById总是返回节点而不是里面的值。你必须分开。

var gradePercentage = (grade.value/totalGrade.value)*100;
document.getElementById("result").innerHTML = gradePercentage+ "%";