累积 GPA 计算器

Question

我正在创建累积 GPA 计算器，但无法让计算器输出任何值。我的代码或计算有什么问题吗？

<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

您有几个问题：

当您运行您的 <script>

#newcumulativegpa

您没有获取 #newcumulativegpa 元素，您正在创建一个全局变量 newcumulativegpa 并分配给它。
没有 <p2> 标签
当在 #oldcumulativegpa 元素中按下一个键时，您只是在运行设置您的函数
<input type="number"> 的 value 属性是 String。你需要parseFloat(el, 10)把它变成Number

另请参阅此问题，Where should I put tags in HTML markup? 关于我说“当您运行您的 <script> 不存在时 #newcumulativegpa 元素不存在”的意思当你运行你的脚本时不存在。

我明确指出是因为下面的运行nable 脚本无法很好地演示它。

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

myJsFunction 似乎可以根据输入中提供的信息计算此人的 GPA。这是合乎逻辑的，因为您将之前的平均值乘以您在学校度过的时间，加上您当前的 semester/quarter GPA 除以本季度后的总时间。

我认为问题在于您实际上并没有显示结果。您所做的只是创建一个新的

标记，其中包含您在函数中声明的变量的 ID。

累积 GPA 计算器

Cumulative GPA Calculator

javascript

calculator