重构/改进基本的JavaScript练习 - 将数字分数转换为字母等级 [英] Refactoring/Improving a basic JavaScript exercise -- turn a numeric score into a letter grade

问题描述

所以我大约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 a A）;} 
 （$> $ 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 = form1onsubmit =返回false> 
< input type =number
 name =grade
 value =
 min =0max =100> 
< / form> 
< input type =buttonvalue =Gradeonclick =grade（）> 
  

据我所知，这是在微不足道的水平，但只是做这个简单的练习就提高了一吨

1. 为什么按钮不起作用，如果我把它放在窗体标签中？


2. 我试了很长时间才让js与 switch 一起工作。有没有办法做到这一点，或者我是否正确地做了几个 if / else if 语句？


3. 当我没有有 onsubmit =返回false在文本字段中按下回车基本上是所有的东西，'onsubmit =grade（）根本不起作用。有没有什么办法可以让你输入一个数字（87）然后按回车，它不会提交，而是执行grade（）函数？


4. 任何一般的结构改进？

解决方案

1. 设置为您的输入元素，它也被命名为 grade 。


2. 有一种方法，但它会非常冗长。 如果语句应该在这里正常。 试试 window.grade（）;返回false; 。 window.grade 得到了 grade 隐藏到输入 code>。


3. 您可能想了解 的addEventListener 。这使您可以从HTML中完全删除JavaScript代码片段（例如 onclick =window.grade（）; return false;），从而使HTML更清晰。您还可能想了解 document.getElementById （你可以用它来替换 document.form1.grade ，这是一种稍微旧的做法）。

以下是使用<$ c的示例 $ c> addEventListener 和 getElementById 。学习编程乐趣！

So I'm about 10 hours into my programming career; bear with me please.

My attempt to solve the problem of creating a website with an HTML input area and button such that entering a number between 0 and 100 inclusive and clicking the button will take your score and return an alert box with whatever letter grade corresponds to that score is as follows:

First, the .js file

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.");}
}

And the 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()">

I understand that this is at the level of being trivial, but just doing this simple exercise raised a ton of questions for me.

1. Why does the button not work if I put it within the form tags?
2. I tried for an unreasonably long time to get the js to work with switch. Is there a way to do it or am I doing it right with several if/else if statements?
3. When I didn't have onsubmit="return false" pressing enter in the text field basically borked everything, and `onsubmit="grade()" didn't work at all. Is there any way to make it so that when you enter a number (87) and press return it doesn't submit but executes the grade() function?
4. Any general structural improvements?

解决方案

1. For compatibility reasons, grade is set to your input element, which is also named grade.
2. There is a way, but it would be quite verbose. if statements should be fine here.
3. Try window.grade(); return false;. The window.grade gets around the fact that plain grade is masked to the input.
4. You might want to learn about addEventListener. This lets you completely remove the snippets of JavaScript code (eg. onclick="window.grade(); return false;") from the HTML, leading the HTML to be cleaner. You also may want to learn about document.getElementById (which you'd use to replace document.form1.grade, which is a slightly old way of doing things).

Here's an example using addEventListener and getElementById. Have fun learning to program!

这篇关于重构/改进基本的JavaScript练习 - 将数字分数转换为字母等级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！