Simple Grade Calculator

Hi, I’m making a simple grade calculator can’t figure out the bug:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marks</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Enter your grades</h1>
    <form>
      <p>
        <label for="grade1">Test 1:</label>
        <input type="text" id="grade1" name="grade1" />
      </p>
      <p>
        <label for="grade2">Test 2:</label>
        <input type="text" id="grade2" name="grade2" />
      </p>
      <p>
        <label for="grade3">Test 3:</label>
        <input type="text" id="grade3" name="grade3" />
      </p>
      <p>
        <label for="grade4">Test 4:</label>
        <input type="text" id="grade4" name="grade4" />
      </p>
      <p>
        <label for="grade5">Test 5:</label>
        <input type="text" id="grade5" name="grade5" />
      </p>
      <p>
        <button type="button" id="calculate">calculate grades</button>
      </p>
    </form>

    <div id="message"></div>

    <script src="scripts/debug.js"></script>
  </body>
</html>

"use strict";

const button = document.getElementById("calculate");
const message = document.getElementById("message");

button.addEventListener("click", calculate);

function calculate() {
  message.innerHTML = "";
  //read each grade into an array
  const gradeList = document.querySelectorAll("name");
  const grades = [];
  let total = 0;
  let average = 0;

  let numberOfGrades = 5;
  let index = 0;

  while (numberOfGrades > 0) {
    grades.push(grades[index].value);
    total += grades[index].value;
    numberOfGrades = numberOfGrades - 1;
  }

  average = total / numberOfGrades;

  message.innerHTML +=
    "The sum of your marks is: " +
    total +
    " and the average of your marks is: " +
    average;
}

this line:

    grades.push(grades[index].value);

I understand why you want to push values into grades array, but you are also reading from the grades array:

grades[index].value

why use grades here? Didn’t you intent to read the values from the webpage? which variable holds these values?

1 Like

Solved the code:

Aside from the solution above. I also included an index and change the length of the parameter in the loop

"use strict";

const button = document.getElementById("calculate");
const message = document.getElementById("message");

button.addEventListener("click", calculate);

function calculate() {
  message.innerHTML = "";
  //read each grade into an array
  const gradeList = document.querySelectorAll("input");
  const grades = [];
  let total = 0;
  let average = 0;

  let numberOfGrades = 0;
  let index = 0;

  while (numberOfGrades < gradeList.length) {
    grades.push(gradeList[index].value);
    total += Number.parseInt(gradeList[index].value);
    numberOfGrades = numberOfGrades + 1;
    index += 1;
  }

  average = total / numberOfGrades;

  message.innerHTML +=
    "The sum of your marks is: " +
    total +
    " and the average of your marks is: " +
    average;
}