javascript 实时搜索框

Question

I have my search box almost finished, I think the logic of the code is correct, but it is throwing me an error on the line that I want to add the "hide" class, if someone would be so kind as to give me a hand I would appreciate it.

Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at prueba.js:301:19 at Array.forEach (<anonymous>) at HTMLInputElement.<anonymous> (prueba.js:296:13)

Code:

const traigoJson = async()=> {
  const respuesta = await fetch ('../stock.json')
  const data = await respuesta.json()

  let contenedor = document.getElementById("container")

  data.forEach((producto, indice) => {

  let card = document.createElement("div")

  card.classList.add("col-xl-3", "col-lg-3", "col-md-6", "col-sm-6", "hide", `${producto.deporte}`, "products")
  card.innerHTML = `<div class="glasses_box">
      <figure><img src="${producto.imagen}" alt="esta es una foto de ${producto.nombre}"/></figure>
      <h3><span class="blu">$</span>${producto.precio}</h3>
      <p class="product-name">${producto.nombre}</p>
      <button type="button" class="btn btn-outline-secondary boton-comprar" id="asd" onClick = "agregarAlCarrito (${indice})">COMPRAR</button>
   </div>`
  contenedor.appendChild(card)
  
  producto.card = card;
})
}

traigoJson()


const searchInput = document.getElementById("search-input")
const card = document.querySelectorAll(".products")
searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()

  productos.forEach(producto => {
    const isVisible =
      producto.nombre.toLowerCase().includes(value) ||
      producto.deporte.toLowerCase().includes(value)

    producto.card.classList.toggle("hide", !isVisible)
  
  })
})

Answer 1

You create a card element for each product, but then do not add the card to the product item. And so the code errors during the search when trying to get the value of producto.card .

In the code below I've added this line to the forEach loop:

producto.card = card;

This change should be enough to get you started.

 let productos = [{ nombre: "1", deporte: "d", precio: "100", imagen: "https://via.placeholder.com/100" }, { nombre: "2", deporte: "d", precio: "100", imagen: "https://via.placeholder.com/100" }, { nombre: "3", deporte: "d", precio: "100", imagen: "https://via.placeholder.com/100" }, { nombre: "4", deporte: "d", precio: "100", imagen: "https://via.placeholder.com/100" }, { nombre: "5", deporte: "d", precio: "100", imagen: "https://via.placeholder.com/100" } ]; const crearCards = () => { let contenedor = document.getElementById("container") productos.forEach((producto, indice) => { let card = document.createElement("div") card.classList.add("col-xl-3", "col-lg-3", "col-md-6", "col-sm-6", "hide", `${producto.deporte}`, "products") card.innerHTML = `<div class="glasses_box"> <figure><img src="${producto.imagen}" alt="esta es una foto de ${producto.nombre}"/></figure> <h3><span class="blu">$</span>${producto.precio}</h3> <p class="product-name">${producto.nombre}</p> <button type="button" class="btn btn-outline-secondary boton-comprar" id="asd" onClick = "agregarAlCarrito (${indice})">COMPRAR</button> </div>` contenedor.appendChild(card) producto.card = card; }) } const searchInput = document.getElementById("search-input") const card = document.querySelectorAll(".products") searchInput.addEventListener("input", e => { const value = e.target.value.toLowerCase() productos.forEach(producto => { const isVisible = producto.nombre.toLowerCase().includes(value) || producto.deporte.toLowerCase().includes(value) producto.card.classList.toggle("hide", ;isVisible) }) }) crearCards();

 .hide { display: none; }

 <div id="container" class="container"> Type 1, 2, 3, 4, or 5 into the search box to test: <input id="search-input" class="form-control my-2" placeholder="search"> <div class="products"></div> </div> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>