Cumulative GPA Calculator

Question

I'm creating a cumulative GPA calculator and I can't get the calculator to output any values. Is there anything I'm doing wrong with the code or calculation?

<div id="Cumulative GPA" class="tabcontent">
    <p2>Cumulative GPA <b>before</b> this semester:</p2> 
    <input type="number" id="oldcumulativegpa">
    <br />
    <p2><b>Number of semesters</b> your Old Cumulative GPA was calculated with:</p2> 
    <input type="number" id="numberofsemesters">
    <br />
    <p2>Your GPA <b>this semester</b>:</p2>
    <input type="number" id="currentsemestergpa">

    <script>
        document.getElementById("oldcumulativegpa").onkeydown = function() {myJsFunction()};

        function myJsFunction() {
            var oldcumulativegpa = document.getElementById('oldcumulativegpa').value;
            var currentsemestergpa = document.getElementById('currentsemestergpa').value;
            var numberofsemesters = document.getElementById('numberofsemesters').value;
        newcumulativegpa = (oldcumulativegpa*numberofsemesters + currentsemestergpa)/(numberofsemesters + 1);
    }
    </script>

    <p2>Your <b>New Cumulative GPA:</p2>
        <p id="newcumulativegpa"></p>
</div>

Answer 1

You have several issues:

1. The #newcumulativegpa element doesn't exist when you run your <script>
2. You aren't getting the #newcumulativegpa element, you are creating a global variable newcumulativegpa and assigning to it.
3. There is no such thing as a <p2> tag
4. You are only running your function when a key is pressed in the #oldcumulativegpa element
5. The value property of <input type="number"> is a String. You need to parseFloat(el, 10) to turn it into a Number

Please also see this question, Where should I put tags in HTML markup? about what I mean when I say "#newcumulativegpa element doesn't exist when you run your <script>" doesn't exist when you run your script.

I'm calling that out explicitly because the following runnable script won't demonstrate it well enough.

const oldCumulativeGPAElement = document.getElementById("oldcumulativegpa");
const currentSemesterGPAElement = document.getElementById("currentsemestergpa");
const numberOfSemestersElement = document.getElementById("numberofsemesters");
const newCumulativeGPAElement = document.getElementById('newcumulativegpa');

function updateGPA() {
  const oldCumGPA = parseFloat(oldCumulativeGPAElement.value, 10);
  const numSemesters = parseFloat(numberOfSemestersElement.value, 10);
  const currSemesterGPA = parseFloat(currentSemesterGPAElement.value, 10);
  /*
   * Test case:
   * 4, 3, 3 should show 3.75
   */
  const newCumulativeGPA = (
    (oldCumGPA * numSemesters) + currSemesterGPA
  ) / (numSemesters + 1);

  newCumulativeGPAElement.innerHTML = newCumulativeGPA;
}

[
  oldCumulativeGPAElement,
  currentSemesterGPAElement,
  numberOfSemestersElement
].forEach(el => el.addEventListener("change", updateGPA));
updateGPA()

<div id="Cumulative GPA" class="tabcontent">
  <ul>
    <li>
      <label>
        <span>Cumulative GPA <b>before</b> this semester:</span>
        <input type="number" min="0" max="4" step="1" id="oldcumulativegpa" value="4" placeholder="Cumulative GPA">
      </label>
    </li>
    <li>
      <label>
        <span><b>Number of semesters</b> your Old Cumulative GPA was calculated with:</span>
        <input type="number" min="1" step="1" placeholder="Number of semesters" id="numberofsemesters" value="3">
      </label>
    </li>
    <li>
      <label>
        <span>Your GPA <b>this semester</b>:</span>
        <input type="number" min="0" max="4" step="1" value="3" placeholder="GPA this semester" id="currentsemestergpa">
      </label>
    </li>
  </ul>
</div>

<label for="newcumulativegpa">Your New Cumulative GPA:</label>
<output id="newcumulativegpa" for="oldcumulativegpa numberofsemesters currentsemestergpa" name="newcumulativegpa">0</output>

Answer 2

The myJsFunction seemingly calculates the person's GPA given the information provided in the inputs. It makes logical sense, as you take your previous average multiplied over the time you've spent in school, plus your current semester/quarter GPA divided by what will be your total time after this quarter.

The problem, I think, is that you're not actually displaying the result. All you're doing is creating a new

tag with the ID of a variable you've declared in your function.