Search an Input and get output related to input Javascript

Question

I am trying to make an input box that asks for a student name, and when someone types a certain name, html will print to the screen displaying that certain student's statistics. I am have trouble with this especially since the console doesn't say there are any errors.

Here is my code that does absolutely nothing as of now.

Also, I don't want any prompts, alerts, or anything like that, I want it to purely be on the page.

Basically, I want it to be a search box for a student's name, and then outputs their stats. So when you click the button, and the student's name you entered matches one in the code, the html will display that student's stats.

________________
|STUDENT_NAME_| <=== student name search here. BUTTON

Then output these stats:
track: 'Front End Development',
achievements: '158',
points: '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>

S4beR · Accepted Answer · 2017-08-25 14:07:55Z

1

I have modified your code a bit. please check this JSFiddle link

To summarise I see few issues. You function getStudentReport expects a student object but you are not passing it anywhere when calling it on click of button. I modified that line as below

getStudentReport(getStudent())

where getStudent is a new function as shown below

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

Also there is no need to add a listener using addEventListener if you are adding onclick on button. So I removed that line. Also there is no code to print the report so I modified the onclick of button as below

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

Overall the final HTML is not the best way to achieve what you are trying to accomplish but I leave the refactoring to you

answered Aug 25, 2017 at 14:07

S4beR

1,8471 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

hannacreed Over a year ago

still not working for me, suppose I'll just have to copy some code online and modify it....

S4beR Over a year ago

did you try the JSFiddle link I gave? You can type Joshua or Becky or any other name and result is getting printed just below the input box

hannacreed Over a year ago

how do I add the the enter button, so that the user can have the option of pressing enter? I tried to add it to my code but I'm not sure where exactly to add it.

S4beR Over a year ago

there are couple of options, either you can handle keypress event on your button and check for enter keycode or you can wrap your input and button inside a form. On press of enter it will trigger a submit event on form

S4beR Over a year ago

I have updated the JSFiddle to handle enter keypress

|

iSZ · Accepted Answer · 2017-08-25 15:54:39Z

You could try something like below. On input change you output a list of names which match the input string and then click one to show your report. Its a better pattern because you can select between duplicates.

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

Collectives™ on Stack Overflow

Search an Input and get output related to input Javascript

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related