I'm having trouble getting a letter grade from my JavaScript code

Question

I'm having trouble getting a letter grade from my JavaScript code

I created a JavaScript function that should display a letter grade once the average of 5 subjects is calculated, but for some reason, it's not working as expected. I'm feeling quite lost at the moment.

The fourth function I implemented isn't generating any letter grades. Apart from this issue, I believe everything else in my code is correct.

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;
}

javascript html css

Answer 1

Answer №1

The declaration of the variable letterGrade is incorrect, please use the following code:

let letterGrade = ' '

This line properly declares the letterGrade variable.

Answer 2

The declaration of the variable letterGrade is incorrect, please use the following code:

let letterGrade = ' '

This line properly declares the letterGrade variable.

Answer 3

Answer №2

You need to define the lettergrade variable first. Simply replace letterGrade; with let letterGrade;

Once you make this change, your code will appear like this:

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

function getTotal() {
  let english = getHandleValue('english');
  let math = getHandleValue('math');
  let physics = getHandleValue('physics');
  let computer = getHandleValue('computer');
  let science = getHandleValue('science');
  
  let total = english + math + physics + computer + science;
  document.getElementById('total').innerHTML = total;
  return total;

}

function getAverage() {
  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;
}

Answer 4

You need to define the lettergrade variable first. Simply replace letterGrade; with let letterGrade;

Once you make this change, your code will appear like this:

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

function getTotal() {
  let english = getHandleValue('english');
  let math = getHandleValue('math');
  let physics = getHandleValue('physics');
  let computer = getHandleValue('computer');
  let science = getHandleValue('science');
  
  let total = english + math + physics + computer + science;
  document.getElementById('total').innerHTML = total;
  return total;

}

function getAverage() {
  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;
}

Answer 5

Answer №3

Challenges

After reviewing comments and responses, it appears that the function letterGrade() is using an incorrect variable, Grade, which is undefined. Additionally, the variable grade is not defined, passed as a parameter, or within scope. The breakdown of letterGrade() can be found in Figure I.

Figure I


function letterGrade() {
  /**
   * ISSUE 1 * Naming a Variable
   * Do not name a variable with the same name as the function in which it 
   * resides within
   * ISSUE 2 * Declaring or Defining a Variable
   * Use identifier var (not recommended), let, or const
   *   ex. let letter;
   */
  letterGrade; 
  /**
   * ISSUE 3 * Declaring or Defining Variables
   * grade isn't declared
   *   ex. let grade;
   * grade isn't defined
   *   ex. let grade = 0;
   * grade isn't a parameter
   *   ex. function letterGrade(grade) {...
   * grade isn't within scope
   *   ex. let grade = 0;
   *       function 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';
  
  /**
   * ISSUE 4 * Passing by Value
   * average is never used. If average is a reference to the value calculated 
   * by function getAverage(), then...
   *   - getAverage() should return that value, 
   *   - then that value must be defined outside of getAverage() 
   *   - or passed as a parameter of letterGrade() (recommennded).
   *     ex. ..::OUTSIDE OF letterGrade()::..
   *         function getAverage() {
   *           ...
   *           return average;
   *         }
   *         // Option A
   *         let average = getAverage()
   *         letterGrade(average)
   *         // Option B (recommended)
   *         letterGrade(getAverage)
   *
   *         ..::INSIDE OF letterGrade()::..
   *         function letterGrade(average) {
   *           let grade = typeof average === "number" ? grade : 0;
   *           ...
   *         }
   * Even if average was to be used, it would be useless as the value of
   * letterGrade, there's no point in reassigning it to another variable
   * unless it's to create a copy of another variable declared or defined 
   * outside of the function. 
   */
  let average = letterGrade;
  /**
   * ISSUE 5 * Defining or Declaring Variables
   * Grade variable has the same problem as ISSUE 3
   */
  document.getElementById('Grade').innerHTML = Grade;
}

Solutions

Here are two examples (Example A and Example B) that require understanding certain methods, properties, events, and techniques. Refer to the Appendix at the end of this response for detailed explanations. Both examples include step-by-step instructions within the source code.

Example A

Example A showcases a working example featuring:

a <form> tag
an
```
<input type="range">
```
two <output> tags
an event handler getGrade(e)
a functional letterGrade(score)

Note the logical flow control pattern in Example A:

if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
return "";

The concept of short-circuiting is employed where once a condition is met, the corresponding action is taken, and the function terminates without executing further.

Example B

Example B encompasses:

a <form>
five
```
<input type="number">
```
two <output>
an event handler calc(e)
a concise version of letterGrade(avg) utilizing ternary expressions

Appendix

Answer 6

Challenges

After reviewing comments and responses, it appears that the function letterGrade() is using an incorrect variable, Grade, which is undefined. Additionally, the variable grade is not defined, passed as a parameter, or within scope. The breakdown of letterGrade() can be found in Figure I.

Figure I


function letterGrade() {
  /**
   * ISSUE 1 * Naming a Variable
   * Do not name a variable with the same name as the function in which it 
   * resides within
   * ISSUE 2 * Declaring or Defining a Variable
   * Use identifier var (not recommended), let, or const
   *   ex. let letter;
   */
  letterGrade; 
  /**
   * ISSUE 3 * Declaring or Defining Variables
   * grade isn't declared
   *   ex. let grade;
   * grade isn't defined
   *   ex. let grade = 0;
   * grade isn't a parameter
   *   ex. function letterGrade(grade) {...
   * grade isn't within scope
   *   ex. let grade = 0;
   *       function 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';
  
  /**
   * ISSUE 4 * Passing by Value
   * average is never used. If average is a reference to the value calculated 
   * by function getAverage(), then...
   *   - getAverage() should return that value, 
   *   - then that value must be defined outside of getAverage() 
   *   - or passed as a parameter of letterGrade() (recommennded).
   *     ex. ..::OUTSIDE OF letterGrade()::..
   *         function getAverage() {
   *           ...
   *           return average;
   *         }
   *         // Option A
   *         let average = getAverage()
   *         letterGrade(average)
   *         // Option B (recommended)
   *         letterGrade(getAverage)
   *
   *         ..::INSIDE OF letterGrade()::..
   *         function letterGrade(average) {
   *           let grade = typeof average === "number" ? grade : 0;
   *           ...
   *         }
   * Even if average was to be used, it would be useless as the value of
   * letterGrade, there's no point in reassigning it to another variable
   * unless it's to create a copy of another variable declared or defined 
   * outside of the function. 
   */
  let average = letterGrade;
  /**
   * ISSUE 5 * Defining or Declaring Variables
   * Grade variable has the same problem as ISSUE 3
   */
  document.getElementById('Grade').innerHTML = Grade;
}

Solutions

Here are two examples (Example A and Example B) that require understanding certain methods, properties, events, and techniques. Refer to the Appendix at the end of this response for detailed explanations. Both examples include step-by-step instructions within the source code.

Example A

Example A showcases a working example featuring:

a <form> tag
an
```
<input type="range">
```
two <output> tags
an event handler getGrade(e)
a functional letterGrade(score)

Note the logical flow control pattern in Example A:

if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
if (CONDITION) return LETTER;
return "";

The concept of short-circuiting is employed where once a condition is met, the corresponding action is taken, and the function terminates without executing further.

Example B

Example B encompasses:

a <form>
five
```
<input type="number">
```
two <output>
an event handler calc(e)
a concise version of letterGrade(avg) utilizing ternary expressions

Appendix

Answer 7

Answer №4

REMARKS

This serves as a complete illustration of how you can compute grades in a universal manner without relying on identifiers for each subject input.
By structuring it this way, additional subjects can be included without altering the calculation process.
If a subject is left blank, it will not be factored into the final calculations.

TAGS USED

<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 STYLING

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

JAVASCRIPT LOGIC

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

// Function to calculate grades
function calculateGrades(btn) {

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

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

    // loop through inputs
    for (const input of inputs) {
        // exclude if value is 0
        if (input.value == 0) continue;

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

        // increment count of used subjects
        used++;
    }

    // calculate average grade
    average = total / used;

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

    // get letter grade
    letterGrade( average );
}

// Function to determine the letter grade
function letterGrade(value) {

    // variable declaration
    let letterGrade = null;

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

    // assign letter based on value range
    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 grade
    gradeElement.innerText = letterGrade;
}

Answer 8

REMARKS

This serves as a complete illustration of how you can compute grades in a universal manner without relying on identifiers for each subject input.
By structuring it this way, additional subjects can be included without altering the calculation process.
If a subject is left blank, it will not be factored into the final calculations.

TAGS USED

<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 STYLING

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

JAVASCRIPT LOGIC

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

// Function to calculate grades
function calculateGrades(btn) {

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

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

    // loop through inputs
    for (const input of inputs) {
        // exclude if value is 0
        if (input.value == 0) continue;

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

        // increment count of used subjects
        used++;
    }

    // calculate average grade
    average = total / used;

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

    // get letter grade
    letterGrade( average );
}

// Function to determine the letter grade
function letterGrade(value) {

    // variable declaration
    let letterGrade = null;

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

    // assign letter based on value range
    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 grade
    gradeElement.innerText = letterGrade;
}

I'm having trouble getting a letter grade from my JavaScript code

Answer №1

Answer №2

Answer №3

Challenges

Figure I

Solutions

Example A

Example B

Appendix

Answer №4

Similar questions

Is it possible to incorporate knockout.js within a Node.js environment by utilizing .fn extensions in custom modules?

Problem with accessing state in React 16

A regular expression in Javascript that can be used to identify at least one word starting with a number among multiple words, with a

The Bootstrap modal will not appear when the parent container's position is fixed

How can I organize a dictionary based on a specified key order in Jinja2?

What is the best way to create an onwheel event that produces an up and down effect using JavaScript?

prompting users in a node.js application

Include an HTML header and footer on every page when printing an HTML document

Is it beneficial to incorporate keys into an express instance for improved functionality?

Ways to resolve the issue of iOS Safari showcasing 'a' tag styling differently compared to other browsers

Javascript - Iterating through nested arrays and objects to apply filtering

Utilizing three columns within a <div> element

How to Create a Dynamic CSS Mobile Menu Animation

Personalizing Twitter Bootstrap Directly from the Bootstrap Source Directory

The function json.stringify fails to invoke the toJson method on every object nested within the main object

Is it possible to display a thumbnail image in a separate full-sized window by using CSS or JavaScript?

Create an Angular 2 webpack production project and ensure that the dist folder does not contain any source code

Designing a webpage layout using Bootstrap 4 that includes a horizontal/inline form and two columns

Tips for centering a resized image within a container:

Tips for adjusting the background and text color of Bootstrap dropdowns using CSS