如何將我的 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.