javascript - 重构/改进基本的 JavaScript 练习——将数字分数转换为字母等级

Question

我的编程生涯已经开始了大约 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()">

我知道这只是微不足道的事情，但仅仅做这个简单的练习就给我带来了很多问题。

1. 如果我将按钮放在表单标签内，为什么该按钮不起作用？
2. 我花了很长时间才让 js 与 switch 一起工作。有没有办法做到这一点，或者我用几个 if/else if 语句做得正确吗？
3. 当我没有在文本字段中按下 onsubmit="return false" 时，基本上所有内容都被破坏了，并且 `onsubmit="grade()"根本不起作用。有什么方法可以使当您输入数字(87)并按回车键时它不会提交而是执行grade()函数？
4. 有任何总体结构改进吗？

Answer 1

1. 出于兼容性原因，grade 设置为您的 input 元素，该元素也名为 grade。
2. 有一种方法，但会很冗长。 if 语句在这里应该没问题。
3. 尝试window.grade();返回假；。 window.grade 解决了简单的 grade 被屏蔽到输入这一事实。
4. 您可能想了解 addEventListener 。这使您可以从 HTML 中完全删除 JavaScript 代码片段(例如 onclick="window.grade(); return false;")，从而使 HTML 更加清晰。您可能还想了解document.getElementById (您可以用它来替换 document.form1.grade，这是一种稍微旧的做事方式)。

这是an example使用 addEventListener 和 getElementById。祝学习编程愉快!