javascript - GPA计算器，如何将字母输入变成数字-6ren

javascript - GPA计算器，如何将字母输入变成数字

转载作者：行者123 更新时间：2023-11-28 05:28:42

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

最佳答案

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

最简单的方法是使用一系列 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。这些只是如何映射该想法的示例。

关于javascript - GPA计算器，如何将字母输入变成数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39906431/