在Javascript中查找标记的百分比

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在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>
答案

有一些基本问题:

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>
另一答案
  1. 要获得javascript中的标记,您无需提交表单。
  2. 计算百分比的错误方法。百分比=(标记总和/获得的总标记)×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>
另一答案

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

使用简单的document.getElementById('name').value;和数字你必须解析它为int进行make计算,因为你把输入类型作为文本,它给你字符串所以你必须解析字符串为int为cal。

再次,你计算百分比的逻辑是不准确的,你必须这样做(totelMarks * 100)/ maximum marks;

注意:最大标记可以从中获得标记,例如在这种特殊情况下,您有3个主题,因此您的最大标记为300。

然后从表单中删除表单提交onsubmit属性并添加用按钮替换输入类型提交并在其上调用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>
&#

以上是关于在Javascript中查找标记的百分比的主要内容,如果未能解决你的问题,请参考以下文章

带有标记的Android谷歌地图片段

代码片段使用复杂的 JavaScript 在 UIWebView 中插入 HTML?

CSS 显示代码片段:使用PRE标记包裹长行

几个非常实用的JQuery代码片段

在php中查找两个字符串之间的匹配百分比?

Javascript,循环使用单个td标记中的3个类