搜索输入并获取与输入Javascript相关的输出

我正在尝试输入一个要求学生姓名的输入框，并且当某人键入某个名称时，html将打印到显示某个学生的统计信息的屏幕上。我有麻烦，尤其是因为控制台没有说有任何错误。搜索输入并获取与输入Javascript相关的输出

这里是我的代码，完全没有做到现在。

此外，我不想要任何提示，警报或类似的东西，我希望它纯粹在页面上。

基本上，我想让它成为学生姓名的搜索框，然后输出他们的统计数据。所以当你点击按钮时，你输入的学生姓名与代码中的名字相匹配，html将显示该学生的统计信息。

________________
| STUDENT_NAME_ | < ===学生姓名搜索在这里。 BUTTON

然后输出这些统计数据：
曲目： '前端开发'，
成就： '158'，
点： '14730'

<DOCTYPE! html> 
<html> 
<head> 
    <title>Hello World</title> 
</head> 
<body> 

    First name: <input id="first_name"> 
<button onclick="getStudentReport" id="output"></button> 

    <hr> 
    <div id="result"></div> 

    <script> 
    var students = [ 
     { 
     name: 'Hanna', 
      track: 'Front End Development', 
      achievements: '158', 
       points: '14730' 
     }, 
     { 
     name: 'Joshua', 
      track: 'iOS Development with Swift', 
      achievements: '175', 
       points: '16375' 
     }, 
     { 
     name: 'Becky', 
      track: 'PHP Development', 
      achievements: '55', 
       points: '2025' 
     }, 
     { 
     name: 'Jacob', 
      track: 'Learn WordPress', 
      achievements: '40', 
       points: '1950' 
     }, 
     { 
     name: 'Dug', 
      track: 'Rails Development', 
      achievements: '5', 
       points: '350' 
     } 
    ]; 

    function print(message) { 
     var outputDiv = document.getElementById('output'); 
     outputDiv.innerHTML = message; 
    } 

    function getStudentReport(student) { 
     var report = '<h2>Student: ' + student.name + '</h2>'; 
     report += '<p>Track: ' + student.track + '</p>'; 
     report += '<p>Points: ' + student.points + '</p>'; 
     report += '<p>Achievements: ' + student.achievements + '</p>'; 
     return report; 
    } 

    function say_hi() { 
     var student = document.getElementById('first_name').value; 

     if (student.name === students) { 
     message = getStudentReport(student); 
     print(message); 
     } 

     document.getElementById('result').innerHTML = html; 
    } 

    document.getElementById('output').addEventListener('click', 
    getStudentReport); 
    </script> 

</body> 
</html>

来源

2017-08-25 hannacreed

我已修改了代码位。请检查这JSFiddle link

总结我看到几个问题。您的功能getStudentReport预计会有一个student对象，但您在单击按钮时调用该对象时不会将它传递到任何位置。我修改该行如下

getStudentReport(getStudent())

其中getStudent是一个新的功能如下图所示

function getStudent() { 
    var student = document.getElementById('first_name').value; 
    if (student != null) { 
     for (var i = 0; i < students.length; i++) { 
      if (students[i].name.toLowerCase() === student.toLowerCase()) { 
       return students[i]; 
      } 
     } 
    } 

    return null; 
}

也没有必要添加使用addEventListener如果您在按钮添加onclick的监听器。所以我删除了该行。还没有代码打印的报告，所以我修改后的按钮的onclick如下

onclick="document.getElementById('result').innerHTML = getStudentReport(getStudent())"

总体来说，最终的HTML是不是达到你想达到什么是最好的方式，但我离开重构你

来源

2017-08-25 14:07:55 S4beR

仍然没有工作对我来说，假设我只好在网上复制一些代码并修改它.... – hannacreed

你尝试的jsfiddle链接我给？您可以键入Joshua或Becky或任何其他名称和结果打印在输入框的下方 – S4beR

我试过了，非常感谢，我现在就研究它吧哈哈+ – hannacreed

你可以尝试下面的东西。在输入更改时，输出与输入字符串匹配的名称列表，然后单击一个以显示您的报告。它是一个更好的模式，因为您可以选择重复。

window.addEventListener('load', function() { 
    var matches = document.getElementById('matches'); 
    var input = document.getElementById('first_name'); 
    var result = document.getElementById('result'); 

    matches.addEventListener('click', function(event){ 
     var studentID = event.target.dataset.studentid; 
     var record = students[studentID]; 
     result.innerHTML = `<div>Name: ${record.name}</br> Track: ${record.track} Achievements: ${record.achievements} Points: ${record.points}</div>` 
    }) 

input.addEventListener('input', function(event){ 
    matches.innerHTML = ''; 
    var matchArr = []; 
    var inputString = event.target.value; 
    for(var i in students){ 
     var student = students[i]; 
     if(student.name.substring(0, inputString.length).toLowerCase() == inputString.toLowerCase() && inputString.length > 0){ 
     matchArr.push(i); 
      } 
     } 
     displayStudents(matchArr); 
    }); 
}) 

function displayStudents(matchArr){ 
    for(var i in matchArr){ 
     var studentID = matchArr[i]; 
     var e = document.createElement('div'); 
     e.dataset.studentid = studentID; 
     e.innerHTML = students[studentID].name; 
     matches.appendChild(e); 
    } 
} 

First name: <input id="first_name" type="text" name="first_name"> 
<div id="matches"></div> 
<hr> 
<div id="result"></div>

Example

来源

2017-08-25 15:54:39 iSZ

搜索输入并获取与输入Javascript相关的输出

回答

相关问题