1

I am developing a web application that takes letter grades like A, A-, B etc as form inputs and converts it to number grades (A == 4.0, A- == 3.7 and so on) on the backend. I cant figure out how to convert it (using JavaScript) and display the grade on the HTML. Here is my HTML code:

<td><input type="text" class="form-control" id="cs520" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs550" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs571" placeholder="letter grade"/></td>
<td><input type="text" class="form-control" id="cs575" placeholder="letter grade"/></td>
<td><span id="finalGPA"></span></br><input type="button" onClick=add() value="Submit"> </td>

I found something similar on this link but it seems to not solve my issue. Can someone help me with the Javascript code?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
azrael v
  • 281
  • 5
  • 17

5 Answers5

2

I would start by adding grade classes to your input elements so they can be easily identified. I would, perhaps, add a pattern regex attribute to them too so that if something other than a grade is added it will show an error. Finally, remove the inline JS from the button.

For the JavaScript, pick up the elements you'll need with querySelector and querySelectorAll, and add an event listener to the button that calls the function when it's clicked.

Second, create an object that maps the grade letters to a score. I've only used A-E here, but pick whatever is appropriate for your application.

Finally, use reduce to iterate over the input values, make them uppercase if they're not already, return the score from the grade map, and add it to the textContent of the final score element. You can, of course, use a simple for-loop for the iteration if that's what you're more comfortable with, but reduce is a good fit for this example.

const inputs = document.querySelectorAll('.grade');
const final = document.querySelector('#finalGPA');
const button = document.querySelector('input[type="button"]');
button.addEventListener('click', checkGrades, false);

const gradeMap = {
  A: 4,
  B: 3,
  C: 2,
  D: 1,
  E: 0
}

function checkGrades() {
  final.textContent = [...inputs].reduce((total, grade) => {
    return total += gradeMap[grade.value.toUpperCase()];
  }, 0);
}
<td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs520" placeholder="letter grade" /></td>
<td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs550" placeholder="letter grade" /></td>
<td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs571" placeholder="letter grade" /></td>
<td><input type="text" pattern="^[a-eA-E]{1}[+|-]?$" class="form-control grade" id="cs575" placeholder="letter grade" /></td>
<td><span id="finalGPA"></span><br/>
<input type="button" value="Submit" /></td>

MDN resources

Andy
  • 61,948
  • 13
  • 68
  • 95
2

I would store the letter grades and their numerical values ('A' === 4.0, 'A-' === 3.7, etc) in an object so that way they can be linked through key-value pairs like so:

var grades = {
    'A': 4.0,
    'A-': 3.7,
    // insert rest of grades here
}

Then, using the DOM, you can capture the user input. As an example:

var userGrade = document.getElementById('#cs520').value

Or, if you're using jQuery, you can capture the user input this way:

var userGrade = $('#cs520').val();

Once you have these set up, you can make a function that converts userGrade to its corresponding value in the grades object, then execute some calculation to get the overall GPA.

var GPA = 0; 

function calculateGPA () {
    // adds numerical value of userGrade to GPA for future calculation
    var gradeVal = grades[userGrade];
    GPA += gradeVal;
}

However, I think this calculation will depend on what kind of GPA you'll want to calculate (i.e. regular, weighted, by subject, etc.). Hope this helps!

Diana Tecson
  • 21
  • 3
  • It doesn't look like the OP is using jQuery. Perhaps try a vanilla JS approach? Also: `grade[userGrade]` should be `grades[userGrade]` according to your code. – Andy Nov 21 '17 at 17:04
  • 1
    @Andy thanks for point that out! I've since edited my answer. – Diana Tecson Nov 21 '17 at 17:19
1

As I understood your question, you are taking the Grades like A, A-... pass them to the backend. You are doing some calculations using the grade numbers and send back the result on UI.

You can maintain an Object like

var grades = { 
   "A": 4.0,
   "A-": 3.7,
    ...
}

You can retrieve the grade number like grades["A"]

Harish
  • 1,841
  • 1
  • 13
  • 26
0

One way you could go about doing it would be to first figure out what each letter corresponds to. You could take input for each letter grade, then run a conditional statement to see which one it matches, and assign that variable the GPA. Something along the lines of

Input: A
If (input1 == a) {
value1 == 4.0}
else if (input1 == b) {
value1 == 3.7}

And then at the end you can average all of your input, if you do something similar to the code I provided, look into a way of doing it with a for loop or something similar so you don't have to write out that long code.

Joel Banks
  • 141
  • 3
  • 14
0

You can get input values like this, var input = document.getElementById("input_id").value;

and you can define the grade and points like this.
let totalPoints=0;
let a_Plus=4.0;
let a_minus=3.7;ect..

then with the if confition you can get the values for tha grades.
if(input=="A+"){
totalPoints=totalPoints+a_Plus;
}

With nested if condition you can do whatever you want.

Gamsh
  • 545
  • 4
  • 21