重构/改进基本的JavaScript练习 - 将数字分数转换为字母等级 [英] Refactoring/Improving a basic JavaScript exercise -- turn a numeric score into a letter grade
问题描述
我尝试解决使用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()>
据我所知,这是在微不足道的水平,但只是做这个简单的练习就提高了一吨
- 为什么按钮不起作用,如果我把它放在窗体标签中?
- 我试了很长时间才让js与
switch
一起工作。有没有办法做到这一点,或者我是否正确地做了几个if / else if
语句? - 当我没有有
onsubmit =返回false
在文本字段中按下回车基本上是所有的东西,'onsubmit =grade()根本不起作用。有没有什么办法可以让你输入一个数字(87)然后按回车,它不会提交,而是执行grade()函数? - 任何一般的结构改进?
- 设置为您的
输入
元素,它也被命名为grade
。 - 有一种方法,但它会非常冗长。
如果
语句应该在这里正常。 试试window.grade();返回false;
。window.grade
得到了grade 隐藏到输入 code>。
- 您可能想了解
的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.
- Why does the button not work if I put it within the form tags?
- 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 severalif/else if
statements? - 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? - Any general structural improvements?
- For compatibility reasons,
grade
is set to yourinput
element, which is also namedgrade
. - There is a way, but it would be quite verbose.
if
statements should be fine here. - Try
window.grade(); return false;
. Thewindow.grade
gets around the fact that plaingrade
is masked to theinput
. - 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 aboutdocument.getElementById
(which you'd use to replacedocument.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屋!