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>