Question

我无法弄清楚如何在文本框中搜索下面数组中的成绩，然后在第二个文本框中接收该成绩的所有名称。到目前为止，当我搜索成绩时，我得不到匹配的名字。然而，当我按下“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>

Answer 1

尝试使用过滤器。例如，对于Grades＆＃39; A＆＃39;：

<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>

Answer 2

这是另一种方法......

 <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>

Answer 3

我读了你的问题并提出了一个解决方案，抱歉所有逻辑都在同一个功能中，但它只是一个逻辑划痕，所以如果你不同意它真的很抱歉，但希望你发现它很有用！

<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>

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

3 个答案: