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>

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

Answer 1

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

对于JavaScript，请使用reduce和textContent选择您需要的元素，并在按钮上添加一个事件侦听器，以便在单击该函数时调用该函数。

其次，创建一个将成绩字母映射到分数的对象。我在这里只使用过A-E，但选择适合您应用的任何东西。

最后，使用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); }最终得分元素。当然，你可以使用一个简单的for循环进行迭代，如果这是你更熟悉的东西，但<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>非常适合这个例子。

＆＃13;

from PIL import Image
import matplotlib.pyplot as plt
from matplotlib.offsetbox import OffsetImage, AnnotationBbox

# imbg is layout/ background
imbg = Image.open(r"background.jpg")
# imfg is furniture/ foreground
imfg = Image.open(r"spot.jpg")

# manually set aspect dimension for background
ext= [0,20,0,16]
ax = plt.subplot()  # add sub-plot

oi= OffsetImage(imfg, zoom= 0.1)
ab1= AnnotationBbox(oi, (2, 3), frameon=False)
ax.add_artist(ab1)

plt.imshow(imbg, zorder= 0, extent=ext )
plt.xlabel("Dimensions", fontsize= 12)
plt.title('Proposed', fontsize= 20)

mng = plt.get_current_fig_manager()
mng.window.state("zoomed") 
plt.show()

＆＃13;

{{1}}

＆＃13;

MDN资源

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转换为grade对象中相应值的函数，然后执行一些计算以获得整体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，您可以获得等级的值 if(input=="A+"){
totalPoints=totalPoints+a_Plus;
}

使用嵌套if条件，您可以随心所欲。

使用JavaScript将字母等级GPA转换为数字等级

5 个答案: