2

En este simulador el problema es que no logro hacer que cuando el usuario siga ingresado letras en el input del buscador no siga repitiendo la acción por lo que veo en el console.log, de hecho desaparecen las imágenes a partir de la segunda letra introducida y no sé por qué...

const divDinamico = document.getElementById('divDinamico')

const productos = [
    {id:1, nombre: "Primavera", tipo:"mixta", precio: 900, img: 'img/primaver.jpg'},
    {id:2, nombre: "4 Estaciones", tipo:"masa delgada", precio: 780, img: 'img/4estaciones.jpg'},
    {id:3, nombre: "Doble queso", tipo:"bianca", precio: 800, img: 'img/doble_queso.jpg'},
]
productosUI(productos);

//obtengo el primer input de busqueda por id
let busqueda= document.getElementById('busqueda1');
busqueda.onchange= () => {    //Declaro el manejador de evento onchange    
        //Uso find para encontrar un elemento con ese id en el array de productos
        let encontrado= productos.find(producto => producto.id == busqueda.value );
        console.log(encontrado);
        //Borro los datos de los productos que ya estan el html en divDinamico 
        divDinamico.innerHTML= ""; //Al usar innerHTML accedemos a el contenido del div y lo reemplazamos por ""(Que es equivalente a vacío)
        productoHTML(encontrado);//Utilizo la función productosUI para mostrar el producto encontrado en el HTML

}

//Declaro una función para crear y mostrar un elemento HTML desde JS
function productoHTML(producto) {
        let divProducto= document.createElement('div');//CREO EL NODO
        //LE ASIGNO UN VALOR
        divProducto.innerHTML= `
        <img src="${producto.img}" alt"..." class="divDinamico" height:"50px" class="card-img-top"
        width:"50px">
                <div class"card-body" >
                    <h5 class="card-title">${producto.nombre}</h5>
                    <p class="card-text">${producto.tipo}</p>
                    <p class="card-text">Precio : $${producto.precio}</p>
                    <button id='${producto.id}' class = 'btnCompra'>Comprar</button>
                    </div>
    `;
        //Agrego el elemento que acabo de crear como hijo divDinamico
        divDinamico.appendChild(divProducto);        
}
//obtengo el segundo input de filtro por nombre
let filtro1= document.getElementById('filtro1');
filtro1.onkeyup = () => {//Declaro el manejador de evento onkeyup 
        let valor= filtro1.value.toUpperCase(); //Obtengo el value del input y lo paso a mayúsculas
        //Realizo un filtro en el array productos usando includes
        let filtrados = productos.filter(producto => producto.nombre.includes(valor));
        console.log(filtrados);
        //Borro los datos de los productos que ya estan el html en divDinamico 
        divDinamico.innerHTML= "";//Al usar innerHTML accedemos a el contenido del div y lo reemplazamos por ""(Que es equivalente a vacío)
        productosUI(filtrados);//Utilizo la función productosUI para mostrar los productos filtrados en el HTML     

}
//Función que recorre un array de productos y ejecuta productoHTML para mostrarlo en la página
function productosUI(arrayProductos) {
        for (const producto of arrayProductos) {
                productoHTML(producto);
        }            
}


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <title></title>
    <link rel="stylsheel" href="main.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
    <h1 id="titulo"></h1>
    <hr>    
    
  <input id="busqueda1" type="number" placeholder="Ingrese el ID"><hr>
  <input id="filtro1" type="text" placeholder="Ingrese el nombre"><hr>

  <div id="divDinamico" class="divDinamico"> </div>
  

    
    <script src="main.js"></script>
</body>
</html>

1 respuesta 1

1

Si vas a usar toUpperCase() necesitas usarlo en los dos lados de la comparacion. Quedaria asi:

const divDinamico = document.getElementById('divDinamico')

const productos = [
    {id:1, nombre: "Primavera", tipo:"mixta", precio: 900, img: 'img/primaver.jpg'},
    {id:2, nombre: "4 Estaciones", tipo:"masa delgada", precio: 780, img: 'img/4estaciones.jpg'},
    {id:3, nombre: "Doble queso", tipo:"bianca", precio: 800, img: 'img/doble_queso.jpg'},
]
productosUI(productos);

//obtengo el primer input de busqueda por id
let busqueda= document.getElementById('busqueda1');
busqueda.onchange= () => {    //Declaro el manejador de evento onchange    
        //Uso find para encontrar un elemento con ese id en el array de productos
        let encontrado= productos.find(producto => producto.id == busqueda.value );
        console.log(encontrado);
        //Borro los datos de los productos que ya estan el html en divDinamico 
        divDinamico.innerHTML= ""; //Al usar innerHTML accedemos a el contenido del div y lo reemplazamos por ""(Que es equivalente a vacío)
        productoHTML(encontrado);//Utilizo la función productosUI para mostrar el producto encontrado en el HTML

}

//Declaro una función para crear y mostrar un elemento HTML desde JS
function productoHTML(producto) {
        let divProducto= document.createElement('div');//CREO EL NODO
        //LE ASIGNO UN VALOR
        divProducto.innerHTML= `
        <img src="${producto.img}" alt"..." class="divDinamico" height:"50px" class="card-img-top"
        width:"50px">
                <div class"card-body" >
                    <h5 class="card-title">${producto.nombre}</h5>
                    <p class="card-text">${producto.tipo}</p>
                    <p class="card-text">Precio : $${producto.precio}</p>
                    <button id='${producto.id}' class = 'btnCompra'>Comprar</button>
                    </div>
    `;
        //Agrego el elemento que acabo de crear como hijo divDinamico
        divDinamico.appendChild(divProducto);        
}
//obtengo el segundo input de filtro por nombre
let filtro1= document.getElementById('filtro1');
filtro1.onkeyup = () => {//Declaro el manejador de evento onkeyup 
        let valor= filtro1.value.toUpperCase(); //Obtengo el value del input y lo paso a mayúsculas
        //Realizo un filtro en el array productos usando includes
        let filtrados = productos.filter(producto => producto.nombre.toUpperCase().includes(valor));
        console.log(filtrados);
        //Borro los datos de los productos que ya estan el html en divDinamico 
        divDinamico.innerHTML= "";//Al usar innerHTML accedemos a el contenido del div y lo reemplazamos por ""(Que es equivalente a vacío)
        productosUI(filtrados);//Utilizo la función productosUI para mostrar los productos filtrados en el HTML     

}
//Función que recorre un array de productos y ejecuta productoHTML para mostrarlo en la página
function productosUI(arrayProductos) {
        for (const producto of arrayProductos) {
                productoHTML(producto);
        }            
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
    <title></title>
    <link rel="stylsheel" href="main.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
    <h1 id="titulo"></h1>
    <hr>    
    
  <input id="busqueda1" type="number" placeholder="Ingrese el ID"><hr>
  <input id="filtro1" type="text" placeholder="Ingrese el nombre"><hr>

  <div id="divDinamico" class="divDinamico"> </div>
      
    <script src="main.js"></script>
</body>
</html>

2
  • OK @alanfcm He realizado lo que me has respondido y está solucionado, pero sigo observando que cada vez que el usuario ingresa una letra se larga un array por la consola con dicho objeto filtrado... obvio que se está disparando el filtro con la acción cada vez que se suelta la tecla, pero así debería ser ¿cierto? Commented el 27 sept. 2021 a las 20:56
  • Asi es, cada vez que sueltas una tecla se va a ejecutar el codigo. Si no quieres que salga el array en consola elimina el console.log()
    – alanfcm
    Commented el 27 sept. 2021 a las 21:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.