时间戳

首页 > 解决方案 > 在 Javascript 中查找标记的百分比

javascript - 在 Javascript 中查找标记的百分比

问题描述

我正在尝试获取以表格形式提交的分数百分比。但我无法理解我在代码中做错了什么。我正在为学生打分并显示他们的姓名和百分比。我正在使用表单和输入并提交它以获取 javascript 中的百分比。

function getReport() {
    var name = document.forum.getElementById('name1').value;
    var eng = document.forum.getElementById('eng').value;
    var mat = document.forum.getElementById('mathss').value;
    var phy = document.forum.getElementById('physs').value;

    var totalmarks = eng + mat + phy;

    var percentage = (totalmarks / 3) * 100;

    document.getElementById('resname').innerHTML = name;
    document.getElementById('getavg').innerHTML = percentage;
}
<!DOCTYPE html>
<html>
    <head>
        <title> Student Result </title>
    </head>
    <body>
        <h1> Student Result </h1>
        <form name="forum" onSubmit="getReport()">
            <table>
                <tr>
                    <td> Name:  <input type="text" id="name1" > </td>
                </tr>
                <tr>
                    <td> <strong> Marks </strong> </td>
                </tr>
                <tr>
                    <td> English  <input type="text" id="eng" > </td>
                </tr>
                <tr>
                    <td> Maths  <input type="text" id="mathss" > </td>
                </tr>
                <tr>
                    <td> Physics  <input type="text" id="physs" > </td>
                </tr>
                <tr>
                    <td> <input type="submit" id="subb"  value="SUBMIT"> </td>
                </tr>
            </table>
        </form>
        <p id="resname"></p>
        <p id="getavg"></p>
        <script language="javascript" src="res.js" >  </script>
    </body>
</html>

标签： javascripthtml

解决方案

有几个基本问​​题：

1) 表单总是回发到服务器（因此破坏了 JavaScript 所做的任何更改），因为您没有阻止默认提交行为。onsubmit="return getReport()"并return false;在函数结束时解决此问题。

2)document.forum.getElementById无效。您没有在此处指定表单的名称。ID 对整个页面必须是唯一的，因此无论如何这样做都没有用。document.getElementById是正确的。

3) 来自文本框的值最初是字符串。如果您使用 + 将它们放在一起，您只需将它们放在一起。这会让你的数学出错。例如，如果您在分数框中输入“3”、“4”和“5”，那么eng + mat + phys将解析为"3" + "4" + "5"，结果是"345"因为它们都是字符串，所以它只是将它们连接在一起。这使得百分比等于 11500，这显然是无稽之谈。相反，您需要使用parseInt()（假设它们始终是整数）将它们解析为数字，然后它会这样做（例如3 + 4 + 5，当然等于12.

这是一个修复所有这些问题的版本。这些都是单独的小细节，仔细调试可以很容易地揭示出来。

function getReport() {
    var name = document.getElementById('name1').value;
    var eng = parseInt(document.getElementById('eng').value);
    var mat = parseInt(document.getElementById('mathss').value);
    var phy = parseInt(document.getElementById('physs').value);

    var totalmarks = eng + mat + phy;
    console.log(totalmarks);

    var percentage = (totalmarks / 3) * 100;

    document.getElementById('resname').innerHTML = name;
    document.getElementById('getavg').innerHTML = percentage;
    return false; //stop the form posting back
}
<h1> Student Result </h1>
        <form name="forum" onsubmit="return getReport()">
            <table>
                <tr>
                    <td> Name:  <input type="text" id="name1" > </td>
                </tr>
                <tr>
                    <td> <strong> Marks </strong> </td>
                </tr>
                <tr>
                    <td> English  <input type="text" id="eng" > </td>
                </tr>
                <tr>
                    <td> Maths  <input type="text" id="mathss" > </td>
                </tr>
                <tr>
                    <td> Physics  <input type="text" id="physs" > </td>
                </tr>
                <tr>
                    <td> <input type="submit" id="subb"  value="SUBMIT"> </td>
                </tr>
            </table>
        </form>
        <p id="resname"></p>
        <p id="getavg"></p>

推荐阅读