Question

我正在尝试以表格形式提交分数的分数。但是我无法理解我在代码中做错了什么。我在给学生打分，并显示他们的姓名和百分比。我正在使用表单和输入并将其提交以获取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>

Answer 1

有一些基本问题：

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>

Answer 2

要获取javascript中的标记，您无需提交表格。
错误的百分比计算方法。百分比=（分数总和/获得的总分数）×100

function getReport()
        {

          var name = document.getElementById('name1').value;
          var eng = document.getElementById('eng').value;
          var mat = document.getElementById('mathss').value;
          var phy = document.getElementById('physs').value;

          var totalmarks = parseInt(eng) + parseInt(mat) + parseInt(phy) ;

           var average = (totalmarks/3)*100 ;
           var percentage = (totalmarks/300)*100 ;
          
          

          document.getElementById('resname').innerHTML = name ;
          document.getElementById('getavg').innerHTML = percentage ;

        }

<html>
    <head>

      <title> Student Result </title>

      </head>

      <body>

        <h1> Student Result </h1>
        <form name="forum" >

          <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="button" id="subb"  value="SUBMIT" onClick="return getReport()"> </td>
                      </tr>
            </table>



          </form>
          <p id="resname"></p>
          <p id="getavg"></p>

         

        </body>
    </html>

javascript代码

function getReport()
    {

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

      var totalmarks = parseInt(eng) + parseInt(mat) + parseInt(phy) ;

       var average = (totalmarks/3)*100 ;
       var percentage = (totalmarks/300)*100 ;



      document.getElementById('resname').innerHTML = name ;
      document.getElementById('getavg').innerHTML = percentage ;

    }

working example

Answer 3

首先不要使用document.forum.getElementById('name').value;

使用简单的document.getElementById('name').value;，对于数字，您必须将其解析为int以进行计算，因为您将输入类型作为文本输入给了字符串，因此必须将字符串解析为int以获取cal。

同样，您计算百分比的逻辑也不准确，您必须像这样(totelMarks * 100)/ maximum marks;

注意：最高分数可以从中获得分数，例如在此perticuller案例中，您有3个主题，因此最高分数为300。

然后从表单中删除表单Submit onsubmit属性，并用按钮添加替换输入类型Submit并按如下所示调用onclick属性

onclick =“ getReports（）”

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;

    var percentage = (totalmarks *100) / 300;

    document.getElementById('resname').innerHTML = name;
    document.getElementById('getavg').innerHTML = percentage;
}

<form">
            <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="Button" id="subb"value="SUBMIT" onclick="getReport()"> </td>
                </tr>
            </table>
        </form>
        <p id="resname"></p>
        <p id="getavg"></p>

查找Java标记中的百分比

3 个答案: