使用 JavaScript 将字母成绩 GPA 转换为数字成绩

Question

我正在开发一个 Web 应用程序，它将 A、A-、B 等字母等级作为表单输入，并将其转换为后端的数字等级（A == 4.0、A- == 3.7 等）。 我不知道如何转换它（使用 JavaScript）并在 HTML 上显示成绩。 这是我的 HTML 代码：

<td><input type="text" class="form-control" id="cs520" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs550" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs571" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs575" placeholder="letter grade"/></td>
<td><span id="finalGPA"></span></br><input type="button" onClick=add() value="Submit"> </td>

我在此链接上发现了类似的内容，但似乎无法解决我的问题。 有人可以帮助我使用 Javascript 代码吗？

Answer 1

我首先将grade类添加到您的输入元素，以便可以轻松识别它们。 我可能也会为它们添加一个pattern正则表达式属性，这样如果添加了等级以外的其他内容，它就会显示错误。 最后，从按钮中删除内联 JS。

对于 JavaScript，使用querySelector和querySelectorAll选取您需要的元素，然后将事件侦听器添加到单击时调用该函数的按钮。

其次，创建一个将成绩字母映射到分数的对象。 我在这里只使用了 AE，但请选择适合您的应用程序的任何内容。

最后，使用reduce迭代输入值，如果它们还没有，则将它们设为大写，从等级图中返回分数，并将其添加到最终分数元素的textContent 。 当然，如果您更喜欢使用简单的 for 循环进行迭代，您当然可以，但reduce非常适合此示例。

 const inputs = document.querySelectorAll('.grade'); const final = document.querySelector('#finalGPA'); const button = document.querySelector('input[type="button"]'); button.addEventListener('click', checkGrades, false); const gradeMap = { A: 4, B: 3, C: 2, D: 1, E: 0 } function checkGrades() { final.textContent = [...inputs].reduce((total, grade) => { return total += gradeMap[grade.value.toUpperCase()]; }, 0); }

 <td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs520" placeholder="letter grade" /></td> <td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs550" placeholder="letter grade" /></td> <td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs571" placeholder="letter grade" /></td> <td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs575" placeholder="letter grade" /></td> <td><span id="finalGPA"></span><br/> <input type="button" value="Submit" /></td>

MDN资源

• reduce
• querySelectorAll
• querySelector
• input模式属性信息
• Spread syntax

Answer 2

我会将字母等级及其数值（'A' === 4.0、'A-' === 3.7 等）存储在一个对象中，以便它们可以通过键值对进行链接，如下所示：

var grades = {
    'A': 4.0,
    'A-': 3.7,
    // insert rest of grades here
}

然后，使用 DOM，您可以捕获用户输入。 举个例子：

var userGrade = document.getElementById('#cs520').value

或者，如果您使用 jQuery，则可以通过以下方式捕获用户输入：

var userGrade = $('#cs520').val();

完成这些设置后，您可以创建一个函数，将 userGrade 转换为 Grades 对象中的相应值，然后执行一些计算以获得整体 GPA。

var GPA = 0; 

function calculateGPA () {
    // adds numerical value of userGrade to GPA for future calculation
    var gradeVal = grades[userGrade];
    GPA += gradeVal;
}

但是，我认为这种计算将取决于您要计算的 GPA 类型（即常规、加权、按学科等）。 希望这可以帮助！

Answer 3

据我了解您的问题，您正在将 A、A-... 等成绩传递给后端。 您正在使用成绩编号进行一些计算，并在 UI 上发回结果。

您可以维护一个对象，如

var grades = { 
   "A": 4.0,
   "A-": 3.7,
    ...
}

您可以检索成绩编号，如grades["A"]

Answer 4

你可以去做的一种方法是首先弄清楚每个字母对应什么。 您可以为每个字母等级输入输入，然后运行条件语句以查看它匹配哪一个，并将该变量分配给 GPA。 类似的东西

Input: A
If (input1 == a) {
value1 == 4.0}
else if (input1 == b) {
value1 == 3.7}

然后最后你可以平均你所有的输入，如果你做一些类似于我提供的代码的事情，研究一种用 for 循环或类似的东西来做的方法，这样你就不必写出那么长的代码.

Answer 5

你可以得到这样的输入值， var input = document.getElementById("input_id").value;

你可以像这样定义成绩和分数。
let totalPoints=0;
let a_Plus=4.0;
let a_minus=3.7; 等..

然后使用 if confition，您可以获得 tha 等级的值。
if(input=="A+"){
totalPoints=totalPoints+a_Plus;
}

使用嵌套的 if 条件，您可以为所欲为。