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

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() {&nbsp; &nbsp; var grade = parseInt(document.getElementById("grade").value);&nbsp; &nbsp; var totalGrade = parseInt(document.getElementById("totalGrade").value);&nbsp; &nbsp; var gradePercentage = 100*grade/totalGrade;&nbsp; &nbsp; 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+ "%";