返回与特征关联的名称的Javascript关联数组
我试图在有输入框的地方编写代码，如果我输入“A”，我会得到数组中所有获得“A”分数的学生的名字。我觉得我正在接近，但我只是不太明白我需要做什么，使这个代码的功能。任何帮助都将不胜感激返回与特征关联的名称的Javascript关联数组,javascript,html,arrays,associative,Javascript,Html,Arrays,Associative,我试图在有输入框的地方编写代码，如果我输入“A”，我会得到数组中所有获得“A”分数的学生的名字。我觉得我正在接近，但我只是不太明白我需要做什么，使这个代码的功能。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <title> Javascript </title> <script> var students = [ {name:"Lina",grade:"F"}, {name:"Fr
<!DOCTYPE html>
<html>
<head>
<title> Javascript </title>
<script>
var students = [
{name:"Lina",grade:"F"},
{name:"Fredrik",grade:"D"},
{name:"Sara",grade:"C"},
{name:"Lucia",grade:"B"},
{name:"Hans",grade:"A"},
{name:"Jonathan", grade: "A"}
]
gradesByLetter = ['A', 'B', 'C', 'D', 'F'].map(function(letter){
return students.filter(function(student){
return student.grade == letter;
});
});
gradesByLetter.forEach(function(list){
list.forEach(function(student){
document.getElementById(student.grade).innerHTML += "<li>" + student.name + " (" + student.grade + ")"
});
});
f1.addEventListener('submit', function(evt){
evt.preventDefault(); //ignore this for now but this will stop the error
studentList.innerHTML += "<li>" + studentName.value + " (" + grade.value + ")"
});
</script>
</head>
<body>
<h1>Min Rubik</h1>
<form id="f1">
<input type="text" id="studentName" placeholder="Student Name">
<input type="text" id="grade" placeholder="Grade">
<input type="submit" value="Add">
</form>
<h2>Students:</h2>
<ul id="studentList">
<ol id="A"></ol>
<ol id="B"></ol>
<ol id="C"></ol>
<ol id="D"></ol>
<ol id="F"></ol>
</ul>
</body>
</html>
Javascript
var学生=[
{姓名：“丽娜”，年级：“F”}，
{姓名：“弗雷德里克”，年级：“D”}，
{姓名：“Sara”，年级：“C”}，
{姓名：“卢西亚”，成绩：“B”}，
{姓名：“汉斯”，成绩：“A”}，
{姓名：“乔纳森”，成绩：“A”}
]
gradesByLetter=['A'，'B'，'C'，'D'，'F'].map（函数（字母）{
返回student.filter（函数（student））{
返回student.grade==字母；
});
});
gradesByLetter.forEach（函数（列表）{
list.forEach（函数（学生）{
document.getElementById（student.grade）.innerHTML+=“”+student.name+”（“+student.grade+”）
});
});
f1.addEventListener（'submit'，函数（evt）{
evt.preventDefault（）；//暂时忽略此选项，但这将停止错误
studentList.innerHTML+=“ ”+studentName.value+”（“+grade.value+”）
});
魔方
学生：
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<h1>Min Rubik</h1>
<form id="f1">
<input type="text" id="studentName" placeholder="Student Name">
<input type="text" id="grade" placeholder="Grade">
<input type="button" id="click_me" value="Add">
</form>
<h2>Students:</h2>
<ul id="studentList">
</ul>
<script>
var students = [
{name:"Lina",grade:"F"},
{name:"Fredrik",grade:"D"},
{name:"Sara",grade:"C"},
{name:"Lucia",grade:"B"},
{name:"Hans",grade:"A"},
{name:"Jonathan", grade: "A"}
];
function clickHandler() {
document.getElementById("studentList").innerHTML = "";
students.forEach(function(student) {
if ((student.grade == document.getElementById("grade").value || document.getElementById("grade").value == "") &&
(student.name.toLowerCase() == document.getElementById("studentName").value.toLowerCase() || document.getElementById("studentName").value == "")) {
document.getElementById("studentList").innerHTML += "<li>" + student.name + " (" + student.grade + ")"
}
});
}
document.getElementById("click_me").addEventListener('click',clickHandler);
</script>
</body>
</html>
Javascript
魔方
学生：
var学生=[
{姓名：“丽娜”，年级：“F”}，
{姓名：“弗雷德里克”，年级：“D”}，
{姓名：“Sara”，年级：“C”}，
{姓名：“卢西亚”，成绩：“B”}，
{姓名：“汉斯”，成绩：“A”}，
{姓名：“乔纳森”，成绩：“A”}
];
函数clickHandler（）{
document.getElementById（“学生列表”）.innerHTML=“”；
students.forEach（函数（学生）{
if（（student.grade==document.getElementById（“grade”）.value | | document.getElementById（“grade”）.value==“”）&&
（student.name.toLowerCase（）==document.getElementById（“studentName”）.value.toLowerCase（）| | document.getElementById（“studentName”）.value==“”）{
document.getElementById（“学生列表”）.innerHTML+=“”+student.name+”（“+student.grade+”）
}
});
}
document.getElementById（“click_me”）.addEventListener（“click”，clickHandler）；
document.getElementById（）