GPA 计算器，如何将字母输入转换为数字

Question

我正在尝试制作一个简单的 GPA 计算器。有 4 种形式，我正在尝试让用户输入 4 个字母（A、B、C、D 或 F）并让每个数字代表一个值（A = 4.0，B = 3.0 等）基本上只是得到它们的平均值。现在我只是这样做，所以如果用户输入数字它就可以工作，但现在我想更改它以便用户输入字母等级并获得相同的 gpa 数字。我不知道该怎么做。请帮忙谢谢

（这是我的html）

<!DOCTYPE html>
    <html>
        <head>
            <title>GPA Calculator</title>
            <link type="text/css" rel="stylesheet" href="project6.css">
            <script type="text/javascript" src="project6.js"></script>
        </head>
        <body>
            <h1>Enter Your Grades Below</h1>
            <form name="form" id="form">
                <br>
                <input type="text" class="textForm1" name="textForm1"></input><br>
                <input type="text" class="textForm1" name="textForm2"></input><br>
                <input type="text" class="textForm1" name="textForm3"></input><br>
                <input type="text" class="textForm1" name="textForm4"></input><br>
                <button type="button" onClick="getGrade()">Submit</button>
            </form>
            <div id="div">
            </div>
        </body>
    </html>

（这是我的javascript）

var getGrade = function() {
    var inputOne = document.form.textForm1.value;
    var inputTwo = document.form.textForm2.value;
    var inputThree = document.form.textForm3.value;
    var inputFour = document.form.textForm4.value;
    document.getElementById("div").innerHTML = (Number(inputOne) + Number(inputTwo) + Number(inputThree) + Number(inputFour))/4;
}

Answer 1

基本思路是您要创建字母和数字之间的映射。

执行此操作的最简单方法是一系列 if 语句。

var input = document.querySelector('input');
input.addEventListener('input', function() {
  var inputValue = input.value;
  if (inputValue === 'A') {
    inputValue = 4.0;
  } else if (inputValue === 'B') {
    inputValue = 3.0;
  } else if (inputValue === 'C') {
    inputValue = 2.0;
  } else if (inputValue === 'D') {
    inputValue = 1.0;
  } else {
    inputValue = 0.0;
  }
  console.log(inputValue);
});

1: <input type="text" />

但这会变得非常乏味，尤其是当您有多个输入时。另一种选择是将此功能移动到一个函数中，然后多次使用该函数。

function letterToNumber(letter) {
  if (letter === 'A') {
    return 4.0;
  } else if (letter === 'B') {
    return 3.0;
  } else if (letter === 'C') {
    return 2.0;
  } else if (letter === 'D') {
    return 1.0;
  } else {
    return 0.0;
  }
}

document.querySelector('button').addEventListener('click', function() {
  var input1 = document.getElementById('input1').value;
  var input2 = document.getElementById('input2').value;
  var input3 = document.getElementById('input3').value;
  var input4 = document.getElementById('input4').value;
  
  input1 = letterToNumber(input1);
  input2 = letterToNumber(input2);
  input3 = letterToNumber(input3);
  input4 = letterToNumber(input4);
  console.log(input1, input2, input3, input4);
});

1: <input id="input1" type="text" /><br />
2: <input id="input2" type="text" /><br />
3: <input id="input3" type="text" /><br />
4: <input id="input4" type="text" /><br />
<button>Calculate</button>

这很好用。您可以通过创建一个对象来进一步简化它，其中的键与字母匹配，值与实际数值匹配。

var letterToNumber = {
  A: 4.0,
  B: 3.0,
  C: 2.0,
  D: 1.0
};

document.querySelector('button').addEventListener('click', function() {
  var input1 = document.getElementById('input1').value;
  var input2 = document.getElementById('input2').value;
  var input3 = document.getElementById('input3').value;
  var input4 = document.getElementById('input4').value;
  
  input1 = letterToNumber[input1];
  input2 = letterToNumber[input2];
  input3 = letterToNumber[input3];
  input4 = letterToNumber[input4];
  console.log(input1, input2, input3, input4);
});

1: <input id="input1" type="text" /><br />
2: <input id="input2" type="text" /><br />
3: <input id="input3" type="text" /><br />
4: <input id="input4" type="text" /><br />
<button>Calculate</button>

无论您采用何种方法，请记住基本原则：如果我获得一些价值 X 我想获得一些价值 Y。这些只是如何映射该想法的示例。

Answer 2

我会创建另一个 Javascript 函数来获取输入并计算它，然后您可以从该函数输出。

在函数内部，您可以将字母更改为数字。

JavaScript

const calculateGrade = () => {
  const grades = [inputOne, inputTwo, inputThree, inputFour]
  let sum = 0
  for (let i = 0; i < grades.length; i++) {
    switch (grades[i]) {
      case "A":
        sum += 4.0
      case "B":
        sum += 3.0
      case "C":
        sum += 2.0
      case "D":
        sum += 1.0
    }
  }
  return (sum / 4)
}

Answer 3

还有一个 JavaScript 地图可以为您处理所有关联。

MDN JavaScript Reference: Map

var vals = new Map();
vals.set("A", 4.0);
vals.set("B", 3.0);
vals.set("C", 2.0);
vals.set("D", 1.0);
vals.set("F", 0.0);

并检索：

var grade = document.getElementById("myGrade");
var gradeVal = vals.get(grade);

当然你会在循环中进行检索，获取用户输入的所有成绩的值并计算平均值。这只是一个使用 Map 的简单示例。

Answer 4

我阅读了所有的答案，并且都给了我不同的想法，但最后，我主要遵循了 Mike C. 所做的，但方式并不完全相同。这是我最终得到的完美效果。

var gradeValues = {
    "A": 4.0,
    "B": 3.0,
    "C": 2.0,
    "D": 1.0,
    "F": 0
};
var getGrade = function() {
    input1 = document.form.input1.value;
    input2 = document.form.input2.value;
    input3 = document.form.input3.value;
    input4 = document.form.input4.value;
    document.getElementById("result").innerHTML = ((gradeValues[input1] + gradeValues[input2] + gradeValues[input3] + gradeValues[input4]) / 4) + " is your GPA";
};

GPA 计算器，如何将字母输入转换为数字

GPA Calculator, how to make letter inputs into numbers

html

javascript

css

forms

letters