search bar does not show all relevant results when one letter is entered

user_10728989 0
Viewed 106

im trying to create a search that shows array object names. The more letters entered, the more narrow the search is. However, when i put in one letter, it only shows one result whereas the console.log shows several. The above image is the result i want when i enter the letter "s" but i want it as html text, but the below image is the result. I cant seem to find the issue, its happened on several of my practice projects, the console is able to detect all the names that relate to the entered letter(s) however html does not. Please can somebody tell me why the text is not showing up and how i can fix it, im sorry if this is a rookie mistake, i am a javascript beginner and this is my first solo practice project. Thank you

enter image description here

enter image description here

    var students = [{
        name: `Elon Musk`,
        present: 'true'
    },{
        name: `Bruce Wayne`,
        present: 'false'
    },{
        name: `Steve Rogers`,
        present: 'true'
    },{
        name: `SpiderMan`,
        present: 'true'
    },{
        name: `John Snow`,
        present: 'false'
    }, {
        name: 'Sonic',
        present: `true`
    }, {
        name: `Johnny Silverhand`,
        present: `false`
    }
    ]

    var totalStudents = document.createElement("h2")
    totalStudents.textContent = `Total Students: ${students.length}`
    document.querySelector("body").appendChild(totalStudents)


    var numOfAbs = students.filter(function (student) {
        return student.present === "true"
    })

    var absDisplay = document.createElement("h2")
    absDisplay.textContent = `Number of students present not present: ${numOfAbs.length}`
    document.querySelector("body").appendChild(absDisplay)
    


    document.querySelector("#ClassReg").addEventListener("click", function() {
        students.forEach(function (student) {
            var studentNames = document.createElement("p")
            studentNames.textContent = `${student.name} - ${student.present}`
            document.querySelector("#register").appendChild(studentNames)
            
        })
    })


    document.querySelector("#search-text").addEventListener('input',function (e){
            students.forEach(function (student) {
                if (student.name.toLowerCase().includes(e.target.value.toLowerCase())) {
                    console.log(student.name)
                    document.querySelector("#register").innerHTML = ""
                    const logger = document.createElement("h4")
                    logger.textContent = student.name
                    document.querySelector("#register").appendChild(logger)
                }
            })
    })

    document.querySelector("#search-text").addEventListener('input', function (e) {
        students.forEach(function (student) {
            if (e.target.value.includes(student.name.toLowerCase())){
                student.present = 'true'
                console.log(student.present, student.name)
            }
        })})
 
    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <button>Login</button>
    <button id="ClassReg">ClassReg</button>
    <input id="search-text" type="text" placeholder="Filter students">
    <div id="register">

    </div>
    <script src="/registerDB/script.js"></script>
</body>
</html>

object arrays dom html javascript
1 Answers

Looks like you are clearing the contents of #register on each loop. I think you meant to have this line prior to the for loop:

document.querySelector("#register").innerHTML = ""
David_Thomas_Garcia_401610
Related