Click here for free DL of the app version that can save data.

No:42255

Filtrar una lista con 20 nombres
Developer User18814｜Date and time 24/2/11 8:49:17
Build time 8.2 sec｜Game capacity 2.387KB｜

Script

Aquí tienes un ejemplo de un juego simple donde se filtra una lista de 20 nombres utilizando pictogramas. Este código debe estar contenido en un único archivo HTML y debe ser ejecutado en un navegador web para jugar:

Juego de Filtrado de Nombres

Lista de Nombres:

Nombre1
Nombre2

Filtrar por Inicial:

Resultados:

Este código crea una página HTML con una lista de nombres representados por pictogramas y texto. También incluye un campo de entrada de texto y un botón que permite al usuario filtrar los nombres según las iniciales ingresadas. Al ingresar una inicial y hacer clic en el botón de filtrar, los nombres que comiencen con esa inicial se mostrarán en la sección de resultados, mientras que los demás nombres se ocultarán.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<body>
  <h1>Juego de Filtrado de Nombres</h1>

<div id="nombresContainer">
    <h2>Lista de Nombres:</h2>
    <ul id="nombresList">
      <li>
        <img src="pictograma1.png" alt="">
        <span>Nombre1</span>
      </li>
      <li>
        <img src="pictograma2.png" alt="">
        <span>Nombre2</span>
      </li>
      
      
    </ul>
  </div>

<div id="filtroContainer">
    <h2>Filtrar por Inicial:</h2>
    <input type="text" id="filtroInput" placeholder="Ingrese una inicial">
    <button onclick="filtrarNombres()">Filtrar</button>
  </div>

<div id="resultadoContainer">
    <h2>Resultados:</h2>
    <ul id="resultadoList"></ul>
  </div>

// Recorrer todos los nombres y mostrar solo los que coinciden con el filtro
      for (var i = 0; i < nombres.length; i++) {
        var nombre = nombres[i].getElementsByTagName("span")[0].innerHTML; // Obtener el texto del nombre

// Mostrar o ocultar el nombre dependiendo del filtro
        if (nombre.startsWith(filtro)) {
          nombres[i].style.display = "block"; // Mostrar el nombre
        } else {
          nombres[i].style.display = "none"; // Ocultar el nombre
        }
      }
    }
  </script>
</body>
</html>
```