I wrote a function in JS towards the end that is suppose to give you a letter grade once you get the average of 5 subjects, but it's not showing me anything I'm lost right now

The forth function I wrote doesn't seem to produce any letter grade. I believe everything else is right

function getHandleValue(idName) {
  const value = parseInt(document.getElementById(idName).value);
  console.log(value);
  return value;
}

function getTotal() {
  //console.log("app js starts loading")
  let english = getHandleValue('english');
  let math = getHandleValue('math');
  let physics = getHandleValue('physics');
  let computer = getHandleValue('computer');
  let science = getHandleValue('science');
  //console.log("app js ends loading")
  let total = english   math   physics   computer   science;
  document.getElementById('total').innerHTML = total;
  return total;

}

function getAverage() {
  // option  1
  // const total = parseInt(document.getElementById('total').innerHTML);
  // const average = total / 5;
  // document.getElementById('average').innerHTML = average;

  // option 2
  const average = getTotal() / 5;
  document.getElementById('average').innerHTML = average;
}

function letterGrade() {
  letterGrade;
  if (grade >= 90 && grade <= 100)
    letterGrade = 'A';

  else if (grade >= 80 && grade <= 89)
    letterGrade = 'B';

  else if (grade >= 70 && grade <= 79)
    letterGrade = 'C';

  else if (grade >= 60 && grade <= 69)
    letterGrade = 'D';

  else if (grade > 1 && grade <= 59)
    letterGrade = 'F';

  let average = letterGrade;
  document.getElementById('Grade').innerHTML = Grade;
}

CodePudding user response：

letterGrade isn't declared properly, do:

let letterGrade = ' '

This declares the letterGrade variable.

CodePudding user response：

You haven't declared the lettergrade variable. To do this, replace letterGrade; with let letterGrade;

In your code, this will look like:

function getHandleValue(idName) {
  const value = parseInt(document.getElementById(idName).value);
  console.log(value);
  return value;
}

function getTotal() {
  //console.log("app js starts loading")
  let english = getHandleValue('english');
  let math = getHandleValue('math');
  let physics = getHandleValue('physics');
  let computer = getHandleValue('computer');
  let science = getHandleValue('science');
  //console.log("app js ends loading")
  let total = english   math   physics   computer   science;
  document.getElementById('total').innerHTML = total;
  return total;

}

function getAverage() {
  // option  1
  // const total = parseInt(document.getElementById('total').innerHTML);
  // const average = total / 5;
  // document.getElementById('average').innerHTML = average;

  // option 2
  const average = getTotal() / 5;
  document.getElementById('average').innerHTML = average;
}

function letterGrade() {
  let letterGrade;
  if (grade >= 90 && grade <= 100)
    letterGrade = 'A';

  else if (grade >= 80 && grade <= 89)
    letterGrade = 'B';

  else if (grade >= 70 && grade <= 79)
    letterGrade = 'C';

  else if (grade >= 60 && grade <= 69)
    letterGrade = 'D';

  else if (grade > 1 && grade <= 59)
    letterGrade = 'F';

  let average = letterGrade;
  document.getElementById('Grade').innerHTML = Grade;
}

CodePudding user response：

NOTES

• This is a fully working example of how you can go about calculating the grades in a generic way without having to use ids for each subject input.
• By building it this way, you can add more subjects without changing the calculation logic.
• Also if you do not put a value for a subject than it will not be used in the calculations.

HTML

<div>
    <section><label>Total:</label><span id="total">0</span></section>
    <section><label>Average:</label><span id="average">0</span></section>
    <section><label>Grade:</label><span id="grade">-</span></section>
</div>
<br />
<form onsubmit="return false;">
    <label>English:</label><input type="number" min="0" max="100" step="1" name="english" value="0" /><br />
    <label>Math:</label><input type="number" min="0" max="100" step="1" name="math" value="0" /><br />
    <label>Physics:</label><input type="number" min="0" max="100" step="1" name="physics" value="0" /><br />
    <label>Computer:</label><input type="number" min="0" max="100" step="1" name="computer" value="0" /><br />
    <label>Science:</label><input type="number" min="0" max="100" step="1" name="science" value="0" /><br />

    <br />
    <button onclick="calculateGrades(this)">Calculate Grade</button>
</form>

CSS

label {
    display: inline-block;
    width: 4rem;
    margin-right: 2rem;
    padding: 0.25rem 1rem;
}

JS

const totalElement = document.getElementById("total");
const averageElement = document.getElementById("average");
const gradeElement = document.getElementById("grade");

// Calculate the grades function
function calculateGrades(btn) {

    // find inputs
    const form = btn.closest("form");
    const inputs = form.getElementsByTagName("input");

    // define variables
    let total = 0;
    let used = 0;
    let average = 0;

    // loop over inputs
    for (const input of inputs) {
        // if value = 0, then do not use in calculation
        if (input.value == 0) continue;

        // convert input to number and add it to total
        total  = Number( input.value );

        // increment number of subjects used
        used  ;
    }

    // calculate average grade
    average = total / used;

    // display the values
    totalElement.innerText = total;
    averageElement.innerText = average;

    // get letter grade
    letterGrade( average );
}

// Calculate the grade letter function
function letterGrade(value) {

    // define variables
    let letterGrade = null;

    // if there is no value return
    if ( !value ) return letterGrade;

    // determine letter from value
    switch (true) {
        case value >= 90:
            letterGrade = "A";
            break;
        case value >= 80:
            letterGrade = "B";
            break;
        case value >= 70:
            letterGrade = "C";
            break;
        case value >= 60:
            letterGrade = "D";
            break;
        default:
            letterGrade = "F";
            break;
    }

    // display the grade letter
    gradeElement.innerText = letterGrade;
}