Print the filter function on screen

JavaScript
1

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>
<div class="card" id="card">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

<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>
  </form>
</div>

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
    }
    console.log(viaje)
    
    arrViaje.push(viaje);
    console.log(arrViaje)


}

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


for ( i = 0; filtrado(arrVaje) < i; i++){
        console.log(i);
}


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

pintarViajero.innerHTML=
                `<li>${filtrado[i].name}</li>
                <li>${filtrado[i].origin}</li>
                <li>${filtrado[i].destiny}</li>
                <li>${filtrado[i].people}</li>
                <li>${filtrado[i].dates}</li>`

}
2

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>
</select>
1 Like
3

Just as a starting point

1 Like