GPA计算器，如何将字母输入变成数字答案

【问题标题】：GPA Calculator, how to make letter inputs into numbersGPA计算器，如何将字母输入变成数字
【发布时间】：2017-02-15 19:33:26
【问题描述】：

我正在尝试制作一个简单的 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;
}

【问题讨论】：

如何创建一个内部带有开关/大小写的函数，它将每个字母映射到一个数值？你以前听说过 switch 语句吗？
我听说过他们只是不熟悉使用它们，因为我还是个初学者。我会更多地调查他们，谢谢。

标签： javascript html css forms letters

【解决方案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: &lt;input type="text" /&gt;

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

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。这些只是如何映射该想法的示例。

【讨论】：

我将你在上一个代码中写的部分内容应用到我的代码中，现在效果很好！

【解决方案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)
}

【讨论】：

【解决方案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);

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

【讨论】：

如果你必须支持旧的浏览器版本，你可以使用旧的 JavaScript 对象。

【解决方案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";
};

【讨论】：