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

试试这个，只是一个猜测？你发布代码的方式我无法测试。

更改

var display = document.getElementById('numbergrade');

到

document.getElementById("numbergrade").innerHTML = total;

然后调用calculategrades（）将total传递给它，以便它可以使用。

然后改变

return letterGrade;

到

document.getElementById("lettergrade").innerHTML = lettergrade;

Answer 2

以下是您的固定代码

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”而您没有将函数等级的结果设置为numbergrade的值

在java / html成绩计算器中显示计算答案的问题

2 个答案: