Search bar matching with element from object created with innerHTML JavaScript-CodePudding

I've been trying to match the value from my search with the elements from my array displayed on a list. I'm struggling since I displayed these elements using innerHTML and I can't find the way to match them up.

I've tried to get access to the parentElement but I couldn't, I'm not sure what I've been missing here.

'use strict';
let btnAddSeries = document.querySelector(".btn-primary");
let btnSearch = document.querySelector(".btn-outline-success");
let seriesForm = document.querySelector("#seriesForm");
let search = document.querySelector("#searchTxt");
let listSeries = [{
    film: ['Breaking Bad', 'Better Call Saul', 'Game of Thrones', 'Ozark', 'Peaky Blinders', 'Stranger Things',
      'Sex Eductaion', '13 Reasons Why', 'Skins', 'One of Us Is Lying'
    ],
    genre: "Drama"
  },
  {
    film: ['Servant', 'Penny Dreadful', 'Them', 'The Haunting of Bly Manor', 'Sweet Home', 'The Haunting of Hill House',
      'Haunted', 'True Blood', 'The Midnight Club'
    ],
    genre: "Horror"
  },
  {
    film: ['Rick and Morty', 'The Office US', 'The Office UK', 'Friends', 'Seinfeld', 'The Simpsons', 'The Good Place',
      'Two and a Half Men'
    ],
    genre: "Comedy"
  }
]
class Series {
  constructor(series, type) {
    this.series = series;
    this.type = type;
  }
}
class Display {
  tableBody = document.getElementById('tableBody');

  add(libraryOfSeries) {
    let uiString = `<tr >
                            <td >${libraryOfSeries.series}</td>
                            <td >${libraryOfSeries.type}</td>
                            <button >Delete</button>
                        </tr>`;
    tableBody.innerHTML  = uiString;
  }
}
// DISPLAY SERIES
function displaySeries(series, genreToFilter) {
  let filterSeries = series.find(item => item.genre === genreToFilter);

  for (let i of filterSeries.film) {
    let currentSeries = new Series(i, filterSeries.genre);

    let display = new Display;

    display.add(currentSeries)
  }
}

// CALLING THE FUNCTION DISPLAY

function updateUI() {
  displaySeries(listSeries, "Drama");
  displaySeries(listSeries, "Comedy");
  displaySeries(listSeries, "Horror");
}
updateUI();

// SEARCH SERIES
search.addEventListener("input", function(e) {
      e.preventDefault();
      let word = search.value;
      listSeries.forEach(e => {
        let foundIt = e.film.includes(word);
        e.toggle("hide", !foundIt);
      })

codeSandBox: https://codesandbox.io/p/github/GasparBonari/lll/master?file=/libraryscript.js

CodePudding user response：

You could set the tr's id attribute to the name of the series and then look it up via document.getElementById(...) in your event handler function, e.g.

'use strict';

const btnAddSeries = document.querySelector(".btn-primary");
const btnSearch = document.querySelector(".btn-outline-success");
const seriesForm = document.querySelector("#seriesForm");
const search = document.querySelector("#searchTxt");
const listSeries = [
  {
    film: [
      'Breaking Bad', 
      'Better Call Saul', 
      'Game of Thrones', 
      'Ozark', 
      'Peaky Blinders', 
      'Stranger Things',
      'Sex Eductaion', 
      '13 Reasons Why', 
      'Skins', 
      'One of Us Is Lying'
    ],
    genre: "Drama"
  },
  {
    film: [
      'Servant', 
      'Penny Dreadful', 
      'Them', 
      'The Haunting of Bly Manor', 
      'Sweet Home', 
      'The Haunting of Hill House',
      'Haunted', 
      'True Blood', 
      'The Midnight Club'
    ],
    genre: "Horror"
  },
  {
    film: [
      'Rick and Morty', 
      'The Office US', 
      'The Office UK', 
      'Friends', 
      'Seinfeld', 
      'The Simpsons', 
      'The Good Place',
      'Two and a Half Men'
    ],
    genre: "Comedy"
  }
]

class Series {
  constructor(series, type) {
    this.series = series;
    this.type = type;
  }
}

class Display {
  tableBody = document.getElementById('tableBody');

  add(libraryOfSeries) {
    const uiString = `<tr id="${libraryOfSeries.series}" >
                      <td >${libraryOfSeries.series}</td>
                      <td >${libraryOfSeries.type}</td>
                      <td><button >Delete</button></td>
                    </tr>`;
    tableBody.innerHTML  = uiString;
  }
}

// DISPLAY SERIES
function displaySeries(series, genreToFilter) {
  const filterSeries = series.find(item => item.genre === genreToFilter);
  for (let i of filterSeries.film) {
    const currentSeries = new Series(i, filterSeries.genre);
    const display = new Display;
    display.add(currentSeries)
  }
}

// CALLING THE FUNCTION DISPLAY

function updateUI() {
  displaySeries(listSeries, "Drama");
  displaySeries(listSeries, "Comedy");
  displaySeries(listSeries, "Horror");
}

updateUI();

// SEARCH SERIES
search.addEventListener("input", function(e) {
  e.preventDefault();

  const word = search.value;
  listSeries.forEach(e => {
    e.film.forEach(name => {
      const match = name.toUpperCase().includes(word.toUpperCase());
      const tr = document.getElementById(name);
      tr.style.display = match ? '' : 'none';
    });    
  });
});

<input id="searchTxt" type="text">
<table>
  <tbody id="tableBody">
  </tbody>
</table>