Javascript，如何在文本框中搜索并接收项目´；在另一个文本框中是否有相应的项目？_Javascript_Arrays

Javascript，如何在文本框中搜索并接收项目´；在另一个文本框中是否有相应的项目？

javascript arrays

Javascript，如何在文本框中搜索并接收项目´；在另一个文本框中是否有相应的项目？,javascript,arrays,Javascript,Arrays,我不知道如何在文本框中从下面的数组中搜索一个等级，然后在第二个文本框中接收所有具有该等级的名称。到目前为止，当我搜索成绩时，我没有找到匹配的名字。然而，当我按下“getName”时，我确实会得到一个匹配的名称和等级，但我希望自己能够搜索特定等级，而不仅仅是生成一个随机等级。我需要改变什么 <html> <head> <script> var mName = [ {Name: "Klara",

我不知道如何在文本框中从下面的数组中搜索一个等级，然后在第二个文本框中接收所有具有该等级的名称。到目前为止，当我搜索成绩时，我没有找到匹配的名字。然而，当我按下“getName”时，我确实会得到一个匹配的名称和等级，但我希望自己能够搜索特定等级，而不仅仅是生成一个随机等级。我需要改变什么

 <html> 
  <head> 
    <script>
        var  mName = [
                 {Name: "Klara", Grade: "A"},
                 {Name: "Sarah", Grade: "A"},
                 {Name: "Andrea", Grade: "B"},
                 {Name: "Emil", Grade: "C"},
                 {Name: "Victor", Grade: "C"},
                 {Name: "Alicia", Grade: "D"},
                 {Name: "Thomas", Grade: "E"},
                 {Name: "Robert", Grade: "E"}
        ];

        function getName(){
            return mName[Math.floor(Math.random() * mName.length)]
        }

        function setValues(){
            var tB1 = document.querySelector('#box');
            var tB2 = document.querySelector('#box2');
            var tName = getName();

            tB1 && (tB1.value = tName.Name);
            tB2 && (tB2.value = tName.Grade)
        }
    </script>
</head>

    <body>
    <form>

        <input type="text" name="box2" id="box2" value=""/> <br/>
        <input type="button" name="textbox1" id="textbox1" value="get Names"     onclick="setValues()"/> <br/>
        <input type="text" name="box" id="box" value=""/> <br/>
    </form>
</body>


变量mName=[
{姓名：“克拉拉”，成绩：“A”}，
{姓名：“莎拉”，成绩：“A”}，
{姓名：“安德里亚”，成绩：“B”}，
{姓名：“埃米尔”，年级：“C”}，
{姓名：“维克多”，成绩：“C”}，
{姓名：“艾丽西亚”，年级：“D”}，
{姓名：“托马斯”，成绩：“E”}，
{姓名：“罗伯特”，成绩：“E”}
];
函数getName（）{
返回mName[Math.floor（Math.random（）*mName.length）]
}
函数setValues（）{
var tB1=document.querySelector（“#box”）；
var tB2=document.querySelector（“#box2”）；
var tName=getName（）；
tB1&（tB1.value=tName.Name）；
tB2&（tB2.value=tName.Grade）
}

尝试使用过滤器。例如，对于“A”级：

<html> 
  <head> 
    <script>
        var  mName = [
                 {Name: "Klara", Grade: "A"},
                 {Name: "Sarah", Grade: "A"},
                 {Name: "Andrea", Grade: "B"},
                 {Name: "Emil", Grade: "C"},
                 {Name: "Victor", Grade: "C"},
                 {Name: "Alicia", Grade: "D"},
                 {Name: "Thomas", Grade: "E"},
                 {Name: "Robert", Grade: "E"}
        ];

        function getNames(){
            var filteredGrades = mName.filter(function filterByGrade(student){
              return student.Grade===document.querySelector('#box2').value;
            });
            var names = filteredGrades.map(function namesMap(student){
              return student.Name;
            });
            return names.join(", ");
        }

        function setValues(){
            var tB1 = document.querySelector('#box');
            tB1 && (tB1.value = getNames());
        }

    </script>
</head>

    <body>
    <form>

        <input type="text" name="box2" id="box2" value="" maxlength="1"/> <br/>
        <input type="button" name="textbox1" id="textbox1" value="get Names"     onclick="setValues()"/> <br/>
        <input type="text" name="box" id="box" value=""/> <br/>
    </form>
</body>


变量mName=[
{姓名：“克拉拉”，成绩：“A”}，
{姓名：“莎拉”，成绩：“A”}，
{姓名：“安德里亚”，成绩：“B”}，
{姓名：“埃米尔”，年级：“C”}，
{姓名：“维克多”，成绩：“C”}，
{姓名：“艾丽西亚”，年级：“D”}，
{姓名：“托马斯”，成绩：“E”}，
{姓名：“罗伯特”，成绩：“E”}
];
函数getNames（）{
var filteredGrades=mName.filter（函数filterByGrade（学生）{
返回student.Grade==document.querySelector（'#box2'）.value；
});
变量名称=filteredGrades.map（函数名称映射（学生）{
返回学生姓名；
});
返回名称。join（“，”）；
}
函数setValues（）{
var tB1=document.querySelector（“#box”）；
tB1&（tB1.value=getNames（））；
}

这里是另一种方法

 <html> 
  <head> 
    <script>
        var  mName = [
                 {Name: "Klara", Grade: "A"},
                 {Name: "Sarah", Grade: "A"},
                 {Name: "Andrea", Grade: "B"},
                 {Name: "Emil", Grade: "C"},
                 {Name: "Victor", Grade: "C"},
                 {Name: "Alicia", Grade: "D"},
                 {Name: "Thomas", Grade: "E"},
                 {Name: "Robert", Grade: "E"}
        ];

        function getNames(grade) {

          var tmpStr = ''; // Will contain comma seperated value for input box

          for (var i = 0, len = mName.length; i < len; i++) {
            if(mName[i].Grade === grade) {
              tmpStr += mName[i].Name + ',';
            }
          }
            return tmpStr;
        }

        function setValues(){
            var tB1 = document.querySelector('#box');
            var tB2 = document.querySelector('#box2').value;
            tB1.value = getNames(tB2);          
        }
    </script>
</head>

    <body>
    <form>

        <input type="text" name="box2" id="box2" value=""/> <br/>
        <input type="button" name="textbox1" id="textbox1" value="get Names"     onclick="setValues()"/> <br/>
        <input type="text" name="box" id="box" value=""/> <br/>
    </form>
</body>


变量mName=[
{姓名：“克拉拉”，成绩：“A”}，
{姓名：“莎拉”，成绩：“A”}，
{姓名：“安德里亚”，成绩：“B”}，
{姓名：“埃米尔”，年级：“C”}，
{姓名：“维克多”，成绩：“C”}，
{姓名：“艾丽西亚”，年级：“D”}，
{姓名：“托马斯”，成绩：“E”}，
{姓名：“罗伯特”，成绩：“E”}
];
函数getNames（grade）{
var tmpStr=''；//将包含输入框的逗号分隔值
对于（变量i=0，len=mName.length；i

我读了你的问题并提出了一个解决方案，很抱歉所有的逻辑都在同一个函数中，但这只是一个逻辑上的擦痕，所以如果你不同意，真的很抱歉，但希望你觉得它有用

<html>
<head>
</head>
<body>
    <input placeholder="insert the grade" id="gradeInput"></input> 
    <div id="studentsDisplay"></div>
    <button id="getMatch" onClick="getMatch()">find the match</button>

    <script>
        var  mName = [
            {Name: "Klara", Grade: "A"},
            {Name: "Sarah", Grade: "A"},
            {Name: "Andrea", Grade: "B"},
            {Name: "Emil", Grade: "C"},
            {Name: "Victor", Grade: "C"},
            {Name: "Alicia", Grade: "D"},
            {Name: "Thomas", Grade: "E"},
            {Name: "Robert", Grade: "E"}
            ];

    function getMatch() {
        var grade = 0; //initialize the grade
        var students = []; //initialize students array
        var mNameSize = mName.length; //get the length of OPs array
        var studentDisplay = document.getElementById('studentsDisplay');
        studentDisplay.innerHTML = ""; //empty the display , so when we append it delets the old ones
        //if its empty we dont proceed
        if(!document.getElementById('gradeInput').value) {
            alert('you need to place a grade');
        } else {
            //get the grade
            grade = document.getElementById('gradeInput').value;
            //find every1 that has that grade and store them in the students
            for(var i = 0; i < mNameSize; i++) {
                if(mName[i].Grade == grade) {
                    students.push(mName[i]);
                }
            }
            //append each element of students to the display div
            for(var j = 0; j < students.length; j++) {
                studentDisplay.innerHTML = studentDisplay.innerHTML + students[j].Name + " ";
            }
        }
    };

    </script>

    <style>
    #gradeInput{
        width:250px;
        height:25px;
        border: 1px solid black;
    }
    #getMatch {
        width:250px;
        height:50px;
        border: 1px solid black;
        cursor: pointer;
    }
    #studentsDisplay{
        width:250px;
        height: 25px;
        border: 1px solid black;
    }
    </style>
</body>


找到匹配的
变量mName=[
{姓名：“克拉拉”，成绩：“A”}，
{姓名：“莎拉”，成绩：“A”}，
{姓名：“安德里亚”，成绩：“B”}，
{姓名：“埃米尔”，年级：“C”}，
{姓名：“维克多”，成绩：“C”}，
{姓名：“艾丽西亚”，年级：“D”}，
{姓名：“托马斯”，成绩：“E”}，
{姓名：“罗伯特”，成绩：“E”}
];
函数getMatch（）{
var grade=0；//初始化等级
var students=[]；//初始化students数组
var mNameSize=mName.length；//获取OPs数组的长度
var studentDisplay=document.getElementById（'studentsDisplay'）；
studentDisplay.innerHTML=“；//清空显示，因此当我们附加它时，会删除旧的显示
//如果是空的，我们就不继续
如果（！document.getElementById（'gradeInput'）。值）{
警告（“您需要评分”）；
}否则{
//得分
grade=document.getElementById（'gradeInput'）。值；
//找到每一个有那个分数的学生，并把他们储存在学生中
对于（变量i=0；i


搜索“A”应该返回克拉还是克拉和莎拉？是的，这是个好主意