I am working on an application to search for cities. It returns a card with the flag, capital, population and region; however, it works only until I try to add an `eventListener` to the input search, after which, it does nothing.

Am I calling the search incorrectly? should I maybe do a search function?

P. S: I started coding ~6 months ago and sorry if it is a not well-constructed code.

```js
const APICALL = 'https://restcountries.eu/rest/v2/';
const form = document.querySelector('.recherche')
const input = document.querySelector('.inpRecherche');
const searchBtn = document.querySelector('.searchBtn');
const affichage = document.querySelector('.affichage');

let cities = [];

//API call 

async function dataApi(cities) {

  const call = await fetch(APICALL);
  const data = await call.json();
  cities = data;
  //console.log(cities);

  createCard(cities);

}
dataApi(cities)

function createCard(cities) {

  for (let i = 0; i < cities.length; i++) {

    const cardHTML = `
    <div class="carte">
        <img src="${[cities[i].flag]}" alt="flag"   class="avatar">
        <h2>${[cities[i].name]}</h2>
        <ul class="cont-infos">
            <li class="capital">Capital : ${[cities[i].capital]}</li>
            <li class="population">Population: ${[cities[i].population]}</li>
            <li class="subregion">Region : ${[cities[i].subregion]}</li>
        </ul>
    </div>
    `;
    affichage.innerHTML = cardHTML;
  }
}
searchBtn.addEventListener('click', dataApi);
form.addEventListener('submit', (e) => {
  e.preventDefault()

  if (e.value > 0) {
    //console.log('hello');
    dataApi([cities[i]]);
    input.value = "";
  }
})
```

```css
*,
 ::before,
 ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background-image: url("Background.jpg");
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
}

h1 {
  font-size: 35px;
  text-align: center;
  margin: 30px;
}

.inpRecherche {
  display: block;
  width: 250px;
  padding: 3px;
  font-size: 12px;
}

form,
.affichage {
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.affichage {
  position: absolute;
  justify-content: center;
  border: 2px solid whitesmoke;
  border-radius: 5px;
  width: 300px;
  height: 300px;
  margin: 20px 480px;
}

.searchBtn {
  height: 25px;
  padding: 2px 5px;
  background-color: #2896F6;
  box-shadow: none;
  cursor: pointer;
  color: whitesmoke;
  font-weight: bold;
  border-radius: 3px solid white;
}

.searchBtn:hover {
  background-color: #167CD4;
}

/* a partir d'ici c'est à créer
    */

.card {
  width: 500px;
  height: auto;
  position: relative;
  margin-top: 200px;
  padding-bottom: 20px;
  border-radius: 5px;
  background-color: beige;
}

.avatar {
  height: 150px;
  width: 150px;
  margin-top: 80px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border: 1px solid black;
}

h2 {
  margin-top: 100px;
  text-align: center;
  font-size: 25px;
}

.cont-infos {
  border-top: 1px dashed black;
  margin-top: 20px;
  list-style-type: none;
}

li {
  padding: 10px 20px;
  text-align: justify;
  font-size: 22px;
}

li:nth-child(1) {
  margin-top: 15px;
}
```

```html
<h1>City finder </h1>

<form class="recherche">
  <input type="text" class="inpRecherche" placeholder="Rechercher une ville">
  <button class="searchBtn">Chercher</button>

</form>

<div class="affichage">

</div>
```