Buscador de imagenes Javascript
Publicado por Arnau (4 intervenciones) el 04/06/2020 18:25:57
Tengo un problema que llevo días sin solucionar. Estoy intentado realizar un buscador de imagenes. El ejercicio consiste en escribir en un campo de texto los nombres de las fotos y que el programa las vaya filtrando por orden de letra. El buscador tiene que recorrer el array en el que están el nombre de las fotos, y cada vez que escriba una letra en el buscador, tiene que crear las imagenes que empiecen por la letra introducida. Por ejemplo, hay una imagen que se llama Flor. Si en el buscador pongo la letra "f", tiene que crearse la foto "flor.jpg" junto a otras que empiecen por "f". Si después pones la letra "l" (fl) tienen que salirme las fotos que empiecen por "fe" y el resto tienen que ser borradas.
De momento he conseguido hacer que las fotos se creen pero al borrar una letra en el buscador, las fotos no se borran y se vuelven a crear. No encuentro la forma de hacerlo, lo estoy haciendo con DOM y con un addeventlistener(keyup). Si alguien puede ayudarme lo agradecería mucho.
Dejo el código por aquí:
De momento he conseguido hacer que las fotos se creen pero al borrar una letra en el buscador, las fotos no se borran y se vuelven a crear. No encuentro la forma de hacerlo, lo estoy haciendo con DOM y con un addeventlistener(keyup). Si alguien puede ayudarme lo agradecería mucho.
Dejo el código por aquí:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const array_imatges = [
"flor.jpg",
"manta.jpg",
"fleca.jpg",
"ment.webp",
"feli.jpg",
"menta.jpg",
"fletxa.jpg",
];window.onload = function () {
var palabra = document.getElementById("paraula"); // Este div es donde se van a colocar las fotos.
palabra.addEventListener("keyup", registrar);
}function registrar(){
var texto = document.getElementById("paraula").value; // Recoge el valor que hay en la caja de texto.
console.log(texto);
var answer = []; // Array donde irá la respuesta.
for (var i = 0; i < array_imatges.length; i++){
answer.push(array_imatges[i]);
var fotografia = document.createElement("img");
fotografia.id = array_imatges[i];
fotografia.src = ("img/" + array_imatges[i]);
fotografia.setAttribute("width", "300");
fotografia.setAttribute("height", "200");
fotografia.style.display = "inline";
fotografia.hidden = false;
document.body.appendChild(fotografia);
}document.getElementById("contenidor").innerHTML = array_imatges;
// Esto hace que si no hay nada escrito no aparezca nada.if (texto.length == 0){
document.getElementById("contenidor").style.display = "none";
var allImg = document.getElementsByTagName("img");
for (var j = 0; j < allImg.length; j++){
allImg[j].style.display = "none";
}} else {
document.getElementById("contenidor").style.display = "block";
}Valora esta pregunta
0
