Print the filter function on screen

Good day.

I want to print the filter result in an html. I tried a few things but they don’t work. I also want to print it in a premade card. For now i only tried to print it in a new list, but i’m unable to do so. This is the code.

<div class="card">
  <p><img src="imagenes/china.jpg" alt="Chonqing"></p>
  <p>Visita New York</p>
  <p>Desde 900 euros</p>
  <p>Oferta unica de nuestra web</p>
<div class="card" id="card">

<div class="formulario">
  <form action="">
    <input type="text" class="datos" id="name" placeholder="Nombre">
    <input type="text" class="datos" id="origin" placeholder="Origen">
    <input type="text" class="datos" id="destiny" placeholder="Destino">
    <input type="text" class="datos" id="people" placeholder="Personas">
    <input type="date" class="datos" id="dates" placeholder="Fecha">

    <button type="button" onclick="recoger()">Mas información</button>
    <button type="button" onclick="filtrado()">Filtrar</button>
let arrViaje = [];

function recoger(){
    let nombre = document.getElementById("name").value.toLowerCase()
    let origen = document.getElementById("origin").value.toLowerCase()
    let destino = document.getElementById("destiny").value.toLowerCase()
    let personas = document.getElementById("people").value.toLowerCase()
    let fechas = document.getElementById("dates").value

    let viaje = {
        name : nombre,
        origin: origen,
        destiny: destino,
        people: personas,
        dates: fechas


function filtrado(){
    let result = arrViaje.filter((city) => city.destiny.toLowerCase() == 'canarias' || city.destiny.toLowerCase() == 'galicia' || city.destiny.toLowerCase() == 'mallorca')

for ( i = 0; filtrado(arrVaje) < i; i++){

function pintarViajero(){
    let pintarViajero = document.getElementById("card")



I’m having a look at your code. I would like to know, what is the point of filtrado? What is it supposed to do? What are you trying to filter?

If you only want certain destinations, wouldn’t a select input make more sense?

<select name="destination" id="destination">
  <option value="">Please select destination</option>
  <option value="canarias">Canarias</option>
  <option value="galicia">Galicia</option>
  <option value="mallorca">Mallorca</option>
1 Like

Just as a starting point

1 Like