'Trying to compare child Nodes inner text to an array element

I am trying to compare child Notes inner text to an array but I am unable to do so. The first element of the array is completed but the rest are not.

I enter some text into an input element and press enter upon pressing enter the search function is called which pushes the text from input element to a list and then it compares all the child nodes of a particular div element against that array. The point to note is that every time enter is pressed the array is updated.

var   list = [];
function search(){
var one = event.target.value;
for(var n = 0; n < 10; n++){
document.getElementsByClassName("job")[n].style.display = "none";}
if(event.keyCode == 13){
    list.push(one);
    alert(list)
          for(var z = 0; z < list.length ; z++){
            document.getElementsByClassName("show")[0].children[z].innerHTML = list[z];
            document.getElementsByClassName("show")[0].children[z].style.color = 
            "hsl(180, 29%, 50%)";
            document.getElementsByClassName("show")[0].children[z].style.background = 
            "hsl(180, 31%, 95%)";
            document.getElementsByClassName("show")[0].children[z].style.padding = 
            "10px";
            document.getElementsByClassName("show")[0].children[z].style.fontWeight = 
            "700";
            document.getElementsByClassName("show")[0].children[z].style.fontSize = 
            "11.5px";
            document.getElementsByClassName("show")[0].children[z].style.borderRadius = 
            "5px";}

    for(var i = 0; i < 10; i++){
        var parent = document.getElementsByClassName("job")[i].children[2];
            for(var j = 0 ; j < 5; j++){
                var child = parent.children[j];
                txtValue = child.textContent || child.innerText;
                if(event.target.value.indexOf(txtValue) > -1){
                    document.getElementsByClassName("job")[i].style.display = "flex";}}}
    event.target.value = "";}}


Solution 1:[1]

So I found the solution for the question it was simple just needed to add some counters to record the correct matches.

    list = [];
    var show = document.getElementsByClassName("show")[0];
    function search(){
    var one = event.target.value;
    for(var n = 0; n < 10; n++){
    document.getElementsByClassName("job")[n].style.display = "none";}
    if(event.keyCode == 13){
    list.push(one);
    for(var z = 0; z < list.length ; z++){
        show.children[z].innerHTML = list[z];
        show.children[z].style.color = "hsl(180, 29%, 50%)";
        show.children[z].style.background = "hsl(180, 31%, 95%)";
        show.children[z].style.padding = "10px";
        show.children[z].style.fontWeight = "700";
        show.children[z].style.fontSize = "11.5px";
        show.children[z].style.borderRadius = "5px";}

       var counter = 0;
       for(var e = 0; e < 10; e++){
         var parent = document.getElementsByClassName("job")[e]
         var child1 = parent.children[2];
            for(var f = 0 ; f < 5; f++){
                var child2 = child1.children[f];
                txtValue = child2.textContent || child2.innerText;
                for(var d = 0; d <= list.length; d++){
                    if(txtValue == list[d]){
                        counter += 1;}else{continue;}
                        if(counter == list.length){
                        document.getElementsByClassName("job") 
                        [e].style.display = "block"; counter = 
                        0;}else{continue}}}
                        counter = 0}
                        event.target.value = "";}}

function clear23(){ location.reload()} e

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abdul Haseeb Ahmad Bashir