在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>
- 要获得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>
首先不要使用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中查找标记的百分比的主要内容,如果未能解决你的问题,请参考以下文章