如何将我的 if 语句转换为 for 循环
[英]how to turn my if statements in to a foor loop
问题描述
目前这并不是真正的问题，只是我在寻求另一种解决方案。 当然，我必须有一种更聪明的方法来给每个学生写一个 if 问题，就像我在这里所做的那样来获得他们的成绩。
如果我想获得相同的结果但使用 for 循环？ 我将如何 go 这样做？ 有什么明智的建议吗？
var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; if (studentname == klara) { document.getElementById("output").innerHTML = nameandgrades.students[0].grade + ' '; } if (studentname == andrea) { document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' '; } if (studentname == emil) { document.getElementById("output").innerHTML = nameandgrades.students[1].grade + ' '; } }
<;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>
任何帮助深表感谢！
干杯! //macgajver
5 个解决方案
解决方案1
2 已采纳 2020-12-15 14:11:45
您想从名称与输入中给出的名称匹配的学生数组中获取 object。
- 将输入的值存储在变量中。
- 在
nameandgrades.students上使用find()并检查 objectname属性是否与哪个输入值匹配。 - 在你得到 object 之后得到它的等级和 output 它。
其他一些提示是：
- 在全局 scope 中声明 html 元素，这样就不会在每次单击按钮时都得到它们。
- 对对象和 html 元素使用
const声明。 - 在访问
grade之前检查是否找到 object 否则将导致错误。
const input = document.getElementById("studentname"); const output = document.getElementById("output") const nameandgrades = { "students": [{ "name": "Klara", "grade": "A" }, { "name": "Andrea", "grade": "B" }, { "name": "Emil", "grade": "C" } ] }; function showGrade() { let name = input.value let object = nameandgrades.students.find(x => x.name === name); let grade; if(object){ grade = object.grade } output.innerHTML = grade || "Sorry student not found" }
<h1> Write the students name and see what grade he/she has; </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="showGrade();" /> <br /> <br> </form> <div id="output"> </div>
解决方案2
0 2020-12-15 14:14:27
您可以使用forEach遍历您的学生并将名称与您输入的名称进行比较。
如果他们相等，写出成绩
var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; nameandgrades.students.forEach((stud)=>{ if(studentname === stud.namn){ document.getElementById("output").innerHTML = stud.grade + ' '; } }) }
<;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>
你也可以使用老式的方式，也许是初学者最友好的方式for(let i = 0; i<array.length; i++)
var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (let i = 0; i <nameandgrades.students.length; i++){ if(studentname === nameandgrades.students[i].namn){ document.getElementById("output").innerHTML = nameandgrades.students[i].grade + ' '; } } }
<;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>
解决方案3
0 2020-12-15 14:15:36
您可以按如下方式更新您的getGrade function：
function getGrade() {
var studentname = document.getElementById("studentname").value;
for (var student of nameandgrades.students) {
if (studentname == student.name) {
document.getElementById("output").innerHTML = student.grade + ' ';
return;
}
}
document.getElementById("output").innerHTML = 'Student not found!';
}
var nameandgrades = { "students": [{ "name": "Klara", "grade": "A" }, { "name": "Andrea", "grade": "B" }, { "name": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (var student of nameandgrades.students) { if (studentname == student.name) { document.getElementById("output").innerHTML = student.grade + ' '; return; } } document.getElementById("output").innerHTML = 'Student not found;'; }
<;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>
解决方案4
0 2020-12-15 14:18:10
您可以使用 for 循环并保存找到的学生的索引，也可以使用for (var student of nameandgrades.students)
请不要用非英文名称命名您的变量。 花了我一分钟才看到您使用“namn”而不是“name”作为名称的属性
var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; var klara = "Klara"; var andrea = "Andrea"; var emil = "Emil"; function getGrade() { var studentname = document.getElementById("studentname").value; for (var student of nameandgrades.students) { console.log(student, studentname) if (student.namn == studentname) { document.getElementById("output").innerHTML = student.grade + ' '; break; } } }
<;DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title>json javascript</title> </head> <body> <h1> Write the students name and see what grade he/she has! </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div> </body> </html>
解决方案5
0 2020-12-15 14:20:59
其他答案很好，但认为添加一些额外的健全性检查很好，比如允许klara或Klara ，如果找不到名称检查。
var nameandgrades = { "students": [{ "namn": "Klara", "grade": "A" }, { "namn": "Andrea", "grade": "B" }, { "namn": "Emil", "grade": "C" } ] }; function getGrade() { const name = document.getElementById("studentname").value.toLowerCase(); const student = nameandgrades.students.find(x => x.namn.toLowerCase() === name); document.getElementById('output').innerHTML = student? student.grade: 'Student not found'; }
<h1> Write the students name and see what grade he/she has; </h1> <form> <!-- textbox --> <input type="text" id="studentname" value="Klara" placeholder="name of the student" /> <br /> <br> <!-- mouseclick --> <input type="button" value="visa" onclick="getGrade();" /> <br /> <br> </form> <div id="output"> </div>
JavaScript, JSON - 如何在特定时间内运行 foo 循环？
[英]JavaScript, JSON - How Can I run a foor loop a specific ammount of time?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.