Question

    <!-- Grade Column (2.2) -->
    <div class="grade">

      <!-- Grade Header (2.2.1) -->
      <div class="grade-header">
        <h1>Grades</h1>
      </div>

      <!-- Grade Input (2.2.2) -->
      <div id="grade-input">

        <select id="grade1">
          <option value "" disabled selected hidden>Grade</option>
          <option value="4.0">A</option>
          <option value="3.7">A-</option>
          <option value="3.3">B+</option>
          <option value="3.0">B</option>
          <option value="2.7">B-</option>
          <option value="2.3">C+</option>
          <option value="2.0">C</option>
          <option value="1.7">C-</option>
          <option value="1.3">D+</option>
          <option value="1.0">D</option>
          <option value="0.7">D-</option>
          <option value="0.0">F</option>
        </select>

        <br>
        <br>

        <select id="grade2">
          <option value "" disabled selected hidden>Grade</option>
          <option value="4.0">A</option>
          <option value="3.7">A-</option>
          <option value="3.3">B+</option>
          <option value="3.0">B</option>
          <option value="2.7">B-</option>
          <option value="2.3">C+</option>
          <option value="2.0">C</option>
          <option value="1.7">C-</option>
          <option value="1.3">D+</option>
          <option value="1.0">D</option>
          <option value="0.7">D-</option>
          <option value="0.0">F</option>
        </select>

        <br>
        <br>

      </div>

      <!-- GPA Output (2.2.3) -->
      <h2 id="gpa-output"></h2>

    </div>

    <!-- Credit Column (2.3) -->
    <div class="credit">

      <!-- Credit Header (2.3.1) -->
      <div class="credit-header">
        <h1>Credits</h1>
      </div>

      <!-- Credit Input (2.3.2) -->
      <div id="credit-input">
        <input type="text" placeholder="Credits" id="credit1">
        <br>
        <br>
        <input type="text" placeholder="Credits" id="credit2">
        <br>
        <br>
      </div>

      <!-- Calculate Button (2.3.3) -->
      <button id="calculate-button" type="button" onclick="calculateCollegeGPA()">CALCULATE</button>

HTML：为成绩和学分创建两个用户输入，其中的功能允许用户添加他们需要多少课程来计算其GPA。我手动实现了一些功能，这些功能使用户最多可以计算10门课程。

// Function Creates new Grade Select and Increments ID by +1
(function () {
  var counter = 2;
  var addCourseButton = document.getElementById('addCourse-button');
  var gradeInput = document.getElementById('grade-input');

  var addGrade = function () {
    counter++;
    var select = document.createElement("select");
    var optPH = document.createElement("option");
    var optA = document.createElement("option");
    var optAM = document.createElement("option");
    var optBP = document.createElement("option");
    var optB = document.createElement("option");
    var optBM = document.createElement("option");
    var optCP = document.createElement("option");
    var optC = document.createElement("option");
    var optCM = document.createElement("option");
    var optDP = document.createElement("option");
    var optD = document.createElement("option");
    var optDM = document.createElement("option")
    var optF = document.createElement("option");

    optPH.text = "Grade";
    optPH.hidden = true;

    optA.value = "4.0";
    optA.text = "A";

    optAM.value = "3.7";
    optAM.text = "A-";

    optBP.value = "3.3";
    optBP.text = "B+";

    optB.value = "3.0";
    optB.text = "B";

    optBM.value = "2.7";
    optBM.text = "B-";

    optCP.value = "2.3";
    optCP.text = "C+";

    optC.value = "2.0";
    optC.text = "C";

    optCM.value = "1.7";
    optCM.text = "C-";

    optDP.value = "1.3";
    optDP.text = "D+";

    optD.value = "1.0";
    optD.text = "D";

    optDM.value = "0.7";
    optDM.text = "D-";

    optF.value = "0.0";
    optF.text = "F";

    select.add(optPH, null);
    select.add(optA, null);
    select.add(optAM, null);
    select.add(optBP, null);
    select.add(optB, null);
    select.add(optBM, null);
    select.add(optCP, null);
    select.add(optC, null);
    select.add(optCM, null);
    select.add(optDP, null);
    select.add(optD, null);
    select.add(optDM, null);
    select.add(optF, null);

    select.placeholder = "Grade";
    select.id = 'grade' + counter;

    var space = document.createElement("br");
    var space2 = document.createElement("br");

    gradeInput.appendChild(select);
    gradeInput.appendChild(space);
    gradeInput.appendChild(space2);

  };

  if (addCourseButton) {
    addCourseButton.addEventListener('click', function () {
      addGrade();
    }.bind(this));
  }
})();

// Function Creates new Credit Input and Increments ID by +1
(function () {
  var counter = 2;
  var addCourseButton = document.getElementById('addCourse-button');
  var creditInput = document.getElementById('credit-input');

  var addCredit = function () {
    counter++;
    var input = document.createElement("input"); 
    var space = document.createElement("br");
    var space2 = document.createElement("br");

    input.id = 'credit' + counter;
    input.type = 'text';
    input.placeholder = 'Credits';

    creditInput.appendChild(input);
    creditInput.appendChild(space);
    creditInput.appendChild(space2);
  };

  if (addCourseButton) {
    addCourseButton.addEventListener('click', function () {
      addCredit();
    }.bind(this));
  }
})();

这些功能使用户可以累计所需数量的课程。

function calculateCollegeGPA() {
  // One Class
  var checkGrade1 = document.getElementById("grade1").value;
  var checkCredit1 = document.getElementById("credit1").value;
  if (checkGrade1 !== "" && checkCredit1 !== "") {
    var grade1 = parseFloat(document.getElementById("grade1").value);
    var credit1 = parseFloat(document.getElementById("credit1").value);

    var finalGPA = ((grade1 * credit1)) / credit1;

    document.getElementById("gpa-output").innerHTML = finalGPA.toFixed(2);

    // Two Classes
    var checkGrade2 = document.getElementById("grade2").value;
    var checkCredit2 = document.getElementById("credit2").value;
    if (checkGrade2 !== "" && checkCredit2 !== "") {
      var grade2 = parseFloat(document.getElementById("grade2").value);
      var credit2 = parseFloat(document.getElementById("credit2").value);

      var totalCreditHours = credit1 + credit2;
      var finalGPA = ((grade1 * credit1) + (grade2 * credit2)) / totalCreditHours;

      document.getElementById("gpa-output").innerHTML = finalGPA.toFixed(2);

我正在研究这个个人项目，以计算平均绩点。我想对如何使它成为递归函数提供一些指导，因此我不必为其编写函数来计算有多少门课程的GPA。

这是GITHUB存储库：https://github.com/msorial/GPA-Companion

需要帮助使该函数递归

0 个答案: