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