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

【问题标题】：Converting letter grade GPA to number grade using JavaScript使用 JavaScript 将字母成绩 GPA 转换为数字成绩
【发布时间】：2017-11-21 16:16:35
【问题描述】：

我正在开发一个 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>

我在this link 上发现了类似的东西，但它似乎无法解决我的问题。有人可以帮我编写 Javascript 代码吗？

【问题讨论】：

展示你的尝试...

标签： javascript html css dom-events

【解决方案1】：

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

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

其次，创建一个将等级字母映射到分数的对象。我在这里只使用了 A-E，但请选择适合您应用的任何内容。

最后，使用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

【讨论】：

【解决方案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 类型（即常规、加权、按学科等）。希望这会有所帮助！

【讨论】：

看起来 OP 并没有使用 jQuery。也许尝试香草 JS 方法？另外：根据您的代码，grade[userGrade] 应该是 grades[userGrade]。
@Andy 感谢您指出这一点！我已经编辑了我的答案。

【解决方案3】：

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

你可以像这样维护一个对象

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

您可以像grades["A"]一样检索年级编号

【讨论】：

只是一个对象，不是 JSON 对象。

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

你可以像这样获取输入值， var input = document.getElementById("input_id").value;

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

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

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

【讨论】：