搜索輸入並獲取與輸入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相關的輸出

回答

相關問題