title: Why does my eventlistener for input search doesnt work?
body: <p>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 <code>eventListener</code> to the input search, after which, it does nothing.</p>
  <p>Am I calling the search incorrectly? should I maybe do a search function?</p>
  <p>P. S: I started coding ~6 months ago and sorry if it is a not well-constructed code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; cities.length; i++) {
  
      const cardHTML = `
      &lt;div class="carte"&gt;
          &lt;img src="${[cities[i].flag]}" alt="flag"   class="avatar"&gt;
          &lt;h2&gt;${[cities[i].name]}&lt;/h2&gt;
          &lt;ul class="cont-infos"&gt;
              &lt;li class="capital"&gt;Capital : ${[cities[i].capital]}&lt;/li&gt;
              &lt;li class="population"&gt;Population: ${[cities[i].population]}&lt;/li&gt;
              &lt;li class="subregion"&gt;Region : ${[cities[i].subregion]}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      `;
      affichage.innerHTML = cardHTML;
    }
  }
  searchBtn.addEventListener('click', dataApi);
  form.addEventListener('submit', (e) =&gt; {
    e.preventDefault()
  
    if (e.value &gt; 0) {
      //console.log('hello');
      dataApi([cities[i]]);
      input.value = "";
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
   ::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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;City finder &lt;/h1&gt;
  
  &lt;form class="recherche"&gt;
    &lt;input type="text" class="inpRecherche" placeholder="Rechercher une ville"&gt;
    &lt;button class="searchBtn"&gt;Chercher&lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;div class="affichage"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>