Javascript，如何搜索文本框中的項目並在另一個文本框中接收相應的項目？

-1

我無法弄清楚如何從文本框中的下面的數組中搜索一個等級，然後在第二個文本框中接收到具有該等級的所有名稱。到目前爲止，當我搜索一個等級時，我沒有得到一個匹配的名字。然而，當我只是按下「getName」時，我會得到一個匹配的名稱和等級，但我希望能夠自己搜索特定的成績，而不是隻生成一個隨機的成績。我需要改變什麼？Javascript，如何搜索文本框中的項目並在另一個文本框中接收相應的項目？

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

來源

2016-11-28 Northwood

是否應搜索「A」返回克拉拉克拉拉還是和薩拉？ – Gerrit0

是的多數民衆贊成的想法 – Northwood

這裏是另一種方法...

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

來源

2016-11-28 16:44:52 Zinc

嘗試使用的過濾器。例如，對於等級「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>

來源

2016-11-28 16:43:17 Hoyen

我看了你的問題，並提出瞭解決方案，遺憾的是，所有的邏輯是相同的功能，但它只是一個邏輯的劃痕，所以如果你不同意它真的很抱歉，但希望你覺得它有用！

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

來源

2016-11-28 17:27:57 rule

Javascript，如何搜索文本框中的項目並在另一個文本框中接收相應的項目？

回答

相關問題