重构/改进一个基本的JavaScript练习——把一个数字分数变成一个字母分数

Refactoring/Improving a basic JavaScript exercise -- turn a numeric score into a letter grade

本文关键字：一个数字 JavaScript 重构练习更新时间：2023-09-26

我的编程生涯已经有10个小时了;请听我说。

我试图解决创建一个带有HTML输入区和按钮的网站的问题，以便输入0到100之间的数字，并单击按钮将获取您的分数，并返回一个警告框，其中包含与该分数对应的任何字母等级，如下所示:

首先，.js文件

function grade() {
  score = document.form1.grade.value;
  if (score==100) {alert("Perfect score!");}
  else if (score>=90) {alert("You got an A");}
  else if (score>=80) {alert("You got a B");}
  else if (score>=70) {alert("You got a C");}
  else if (score>=60) {alert("You got a D");}
  else {alert("Failure.");}
}

和HTML:

<form name="form1" onsubmit="return false">
  <input type="number"
  name="grade"
  value=""
  min="0" max="100">
</form>
<input type="button" value="Grade" onclick="grade()">

我知道这是微不足道的，但仅仅做这个简单的练习就给我提出了大量的问题。

为什么按钮不工作，如果我把它在表单标签?
我尝试了一个不合理的长时间让js与switch一起工作。是否有一种方法可以做到这一点，或者我用几个if/else if语句做得对吗?
当我没有在文本字段中按下onsubmit="return false"时，基本上可以启动一切，并且' onsubmit="grade()"根本不起作用。有没有办法使它，当你输入一个数字(87)，并按返回它不提交，但执行grade()函数?
有任何总体结构改进吗?

出于兼容性原因，grade被设置为您的input元素，它也被命名为grade。

if

试试window.grade(); return false;。window.grade绕过了普通grade被input屏蔽的事实。
你可能想了解addEventListener。这使您可以完全删除JavaScript代码片段(例如:onclick="window.grade(); return false;")从HTML，导致HTML更干净。你也可能想了解document.getElementById(你会用它来代替document.form1.grade，这是一种有点老的做事方式)。

下面是使用addEventListener和getElementById的示例。祝你学习编程愉快!

添加到icktofay的良好(和接受)的答案，if的只是很好，但如果您想使用switch语句…

switch (true) {
  case score == 100: alert("Perfect score!"); break;
  case score >= 90:  alert("You got an A");   break;
  case score >= 80:  alert("You got a B");    break;
  case score >= 70:  alert("You got a C");    break;
  case score >= 60:  alert("You got a D");    break;
  default:           alert("Failure.");       break;
}

关于switch和一组if / else if / else:在大多数编程语言中，switch只匹配特定的值，而不是匹配分数计算所需的大于值的比较。在JavaScript中，有一种方法可以绕过这个问题，并在switch中使用比较，但我不建议这样做，因为if / else if结构已经完全适合于此。所以，是的，你做得对。

关于结构，让你的代码更灵活的一种方法是让你的函数返回一个字符串，这是评分结果，而不是直接用alert()显示它。这样，如果你以后决定要对这个字符串做其他事情，而不是警告它，你就不必改变核心函数。此外，我将把它更改为将分数作为参数，而不是总是只计算特定分数字段的分数。

下面的代码是我所讨论的一些例子，请注意，这不一定是非常好的代码，但由于您是新手，我不想通过一次引入太多概念来混淆事情。不过，它包括一些基本的函数参数和字符串连接的东西。如果你需要一个解释，请告诉我。

<script>
function calculateGrade(score) {
  if (score==100) { return "Perfect score!"; }
  else if (score>=90) { return "You got an A"; }
  else if (score>=80) { return "You got a B"; }
  else if (score>=70) { return "You got a C"; }
  else if (score>=60) { return "You got a D"; }
  else { return "Failure."; }
}
function alertGrade(elementId) {
  var score = document.getElementById(elementId).value;
  var grade = calculateGrade(score);
  alert("Score of " + score + ": " + grade);
}
function displayResult() {
  // an example that calculateGrade's return directly instead
  // of storing it in a local variable
  document.getElementById('result').value = "1: "
                  + calculateGrade(document.getElementById('score1').value)
                  + "   2: "
                  + calculateGrade(document.getElementById('score2').value);
}
</script>
<form name="form1" onsubmit="return false;">
  Score 1: <input type="number" id="score1" name="score" min="0" max="100">
  <input type="button" value="Alert Grade 1" onclick="alertGrade('score1')">
  <br/>
  Score 2: <input type="number" id="score2" name="score" min="0" max="100">
  <input type="button" value="Alert Grade 2" onclick="alertGrade('score2')">
  <input type="button" value="Display Both Results" onclick="displayResult()">
  <input type="text" id="result" value="">
</form>