Question

我正在尝试创建一个输入框，询问学生姓名，当有人输入某个名称时，html将打印到显示某个学生统计信息的屏幕。我遇到了麻烦，特别是因为控制台没有说出任何错误。

这是我的代码，现在完全没有任何作用。

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

基本上，我希望它是学生姓名的搜索框，然后输出他们的统计数据。因此，当您单击按钮，并且您输入的学生姓名与代码中的一个匹配时，html将显示该学生的统计数据。

________________
| STUDENT_NAME_ | ＆lt; ===学生姓名在这里搜索。按钮

然后输出这些统计数据：
              轨道：'前端发展'，
              成就：'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>

Answer 1

我稍微修改了你的代码。请查看此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并不是实现您想要实现的目标的最佳方式，但我将重构留给您

Answer 2

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

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

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

2 个答案: