GPA计算器，如何将字母输入数字
[英]GPA Calculator, how to make letter inputs into numbers
问题描述
I am trying to make a simple GPA calculator. 
我正在尝试制作一个简单的GPA计算器。 There are 4 forms and I'm trying to make it so a user enters 4 letters (A,B,C,D, or F) and have each of those numbers represent a value (A = 4.0, B=3.0 ect.) And basically just get the average of them all. 有4种形式，我试图让它成为用户输入4个字母（A，B，C，D或F）并使每个数字代表一个值（A = 4.0，B = 3.0等）。基本上只是得到它们的平均值。 Right now I just made it so it so it works if the user enters numbers, but now I want to change it so the user enters the letter grades and get the same gpa number. 现在我只是这样做它所以如果用户输入数字它是有效的，但现在我想改变它，所以用户输入字母等级并得到相同的gpa数。 I have no idea how to do this. 我不知道该怎么做。 Please help thank you. 请帮忙谢谢。
(This is my html) （这是我的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>
(This is my javascript) （这是我的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;
}
4 个解决方案
解决方案1
0 2016-10-06 22:24:52
The basic idea is you want to create a mapping between letters and numbers. 基本思想是你想在字母和数字之间创建一个映射。
The simplest possible way to do this would be a series of if statements. 最简单的方法是使用一系列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" />
but this gets very tedious, especially if you have multiple inputs. 但这变得非常繁琐，特别是如果你有多个输入。 Another option would be to move this functionality into a function then use that function multiple times. 另一种选择是将此功能移动到一个函数中，然后多次使用该函数。
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>
This works fine. 这很好用。 You could simplify it even further by creating an object where the keys match the letter and the value matches the actual number value. 您可以通过创建一个键与字母匹配且值与实际数值匹配的对象来进一步简化它。
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>
No matter what approach you take, remember the basic principle: if I get some value X I want to get some value Y . 无论你采取什么方法，都要记住基本原则：如果我得到一些价值X我想得到一些价值Y These are just examples of how to map that idea. 这些只是如何映射这个想法的例子。
解决方案2
0 2016-10-06 22:36:31
I would create another Javascript function that takes the input and calculates it, and then you can output from that function. 我将创建另一个获取输入并计算它的Javascript函数，然后您可以从该函数输出。
Inside the function, you can change the letters to numbers. 在函数内部，您可以将字母更改为数字。
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
0 2016-10-07 01:04:35
There's also a JavaScript Map that will handle all the association for you. 还有一个JavaScript Map，可以为您处理所有关联。
MDN JavaScript Reference: Map MDN JavaScript参考：地图
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);
And to retrieve: 并检索：
var grade = document.getElementById("myGrade");
var gradeVal = vals.get(grade);
Of course you would do the retrieval in a loop, getting the values for all the grades entered by a user and calculating the average. 当然，您可以循环检索，获取用户输入的所有等级的值并计算平均值。 This is just a simple example of using a Map. 这只是使用Map的一个简单示例。
解决方案4
0 已采纳 2016-10-11 03:14:16
I read all the answers and all gave me different ideas of what to do, but in the end, I followed mostly what Mike C. did, but not exactly the same way. 我阅读了所有的答案，所有人都给了我不同的想法，但最后，我主要跟着迈克C.做了什么，但不完全一样。 Here's what I ended up with that worked perfectly. 这就是我最终完成的工作。
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";
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.