在java/html等级计算器中显示计算结果的javascript问题

Question

我似乎对答案的显示有问题，当点击计算按钮时，我需要在一个框中显示字母等级，在另一个框中显示数字等级

但两人都不想展示，我尝试了onclick几种方法，但都没有效果

我已经做了我能做的，我很困惑为什么它不起作用

function calculategrades() { var letterGrade = "F"; if (number <= 59) letterGrade = "F"; else if (number >= 60 && number <= 66) letterGrade = "D"; else if (number >= 67 && number <= 69) letterGrade = "D+"; else if (number >= 70 && number <= 76) letterGrade = "C"; else if (number >= 77 && number <= 79) letterGrade = "C+"; else if (number >= 80 && number <= 86) letterGrade = "B"; else if (number >= 87 && number <= 89) letterGrade = "B+"; else if (number >= 90 && number <= 100) letterGrade = "A"; return letterGrade; } function grade() { var test1 = parseFloat(document.getElementById('test').value * 0.20); var test2 = parseFloat(document.getElementById('test2').value * 0.20); var finalexam = parseFloat(document.getElementById('exam').value * 0.30); var labs = parseFloat(document.getElementById('labs').value * 0.25); var project = parseFloat(document.getElementById('project').value * 0.25); var quizzes = parseFloat(document.getElementById('quiz').value * 0.5); var total = test1 + test2 + finalexam + labs + project + quizzes; var display = document.getElementById('numbergrade'); }

<form>
  <table>
    <thead>
      <tr>
        <th colspan="2">Score</th>
      </tr>
    </thead>
    <tr>
      <td>Test 1</td>
      <td><input type="number" name="test" id="test" /></td>
    </tr>
    <tr>
      <td>Test 2</td>
      <td><input type="number" name="test2" id="test3" /></td>
    </tr>
    <tr>
      <td>Final Exam</td>
      <td><input type="number" name="exam" id="exam" /></td>
    </tr>
    <tr>
      <td>Labs</td>
      <td><input type="number" name="labs" id="labs" /></td>
    </tr>
    <tr>
      <td>Project</td>
      <td><input type="number" name="project" id="project" /></td>
    </tr>
    <tr>
      <td>Quizzes</td>
      <td><input type="number" name="quiz" id="quiz" /></td>
    </tr>
    <tr>
      <td colspan="4" style="text-align: center"><input type="button" name="total" id="total" value="Calculate" onclick="grades()" /></td>
    </tr>
    <tfoot>
      <tr>
        <th><input type="text" name="numbergrade" id="numbergrade" /></th>
        <th><input type="text" name="lettergrade" id="lettergrade" /></th>
      </tr>
    </tfoot>
  </table>


</form>

Answer 1

这是你的固定密码

；

；

function calculateGrades(number) {
  var letterGrade = "F";
  if (number <= 59)
    letterGrade = "F";
  else if (number >= 60 && number <= 66)
    letterGrade = "D";
  else if (number >= 67 && number <= 69)
    letterGrade = "D+";
  else if (number >= 70 && number <= 76)
    letterGrade = "C";
  else if (number >= 77 && number <= 79)
    letterGrade = "C+";
  else if (number >= 80 && number <= 86)
    letterGrade = "B";
  else if (number >= 87 && number <= 89)
    letterGrade = "B+";
  else if (number >= 90 && number <= 100)
    letterGrade = "A";
  return letterGrade;
}

function grade() {
  var test1 = parseFloat(document.getElementById('test').value * 0.20);
  var test2 = parseFloat(document.getElementById('test3').value * 0.20);
  var finalexam = parseFloat(document.getElementById('exam').value * 0.30);
  var labs = parseFloat(document.getElementById('labs').value * 0.25);
  var project = parseFloat(document.getElementById('project').value * 0.25);
  var quizzes = parseFloat(document.getElementById('quiz').value * 0.5);
  var total = test1 + test2 + finalexam + labs + project + quizzes;
  return total;
}

function showGrades() {
  var number = grade();
  var letter = calculateGrades(number);
  document.getElementById('numbergrade').value = number;
  document.getElementById('lettergrade').value = letter;
}

；

<form>
  <table>
    <thead>
      <tr>
        <th colspan="2">Score</th>
      </tr>
    </thead>
    <tr>
      <td>Test 1</td>
      <td><input type="number" name="test" id="test" /></td>
    </tr>
    <tr>
      <td>Test 2</td>
      <td><input type="number" name="test2" id="test3" /></td>
    </tr>
    <tr>
      <td>Final Exam</td>
      <td><input type="number" name="exam" id="exam" /></td>
    </tr>
    <tr>
      <td>Labs</td>
      <td><input type="number" name="labs" id="labs" /></td>
    </tr>
    <tr>
      <td>Project</td>
      <td><input type="number" name="project" id="project" /></td>
    </tr>
    <tr>
      <td>Quizzes</td>
      <td><input type="number" name="quiz" id="quiz" /></td>
    </tr>
    <tr>
      <td colspan="4" style="text-align: center"><input type="button" name="total" id="total" value="Calculate" onclick="showGrades()" /></td>
    </tr>
    <tfoot>
      <tr>
        <th><input type="text" name="numbergrade" id="numbergrade" /></th>
        <th><input type="text" name="lettergrade" id="lettergrade" /></th>
      </tr>
    </tfoot>
  </table>


</form>

；

；

；

您输入了很多错误，而且您从未调用函数calculateGrades，也没有接受calculateGrades中的参数，因此您使用了一些全局变量“number”，并且没有将函数grade的结果设置为numbergrade的值