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 Map，可以为您处理所有关联。

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

我阅读了所有答案，所有人都给了我不同的想法，但最后，我大部分时间都遵循了迈克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计算器，如何将字母输入数字

4 个答案: