title: How to update the page for the next search from an API in JavaScript?
body: <p>In this app, When i submit a word (for eg help) for the first time then it will return the search results and renders it on the page, but if i searched for another word then the results wont be displayed until and unless i refresh the page. How can i render next search results on the page? The codepen link is here: <a href="https://codepen.io/nelsonuprety1/pen/KKWreRQ" rel="nofollow noreferrer">https://codepen.io/nelsonuprety1/pen/KKWreRQ</a> . To search for new results the page should be refreshed.</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>'use strict';
  
  
  const submit = document.querySelector('#submit');
  
  const meaningContainer = document.querySelector('.meanings');
  
  const renderSynonym = function (data) {
    const html = `
      &lt;ul class="mean"&gt;
           &lt;li&gt;${data.meanings[0].definitions[0].synonyms}&lt;/li&gt;
       &lt;/ul&gt;
      `;
    meaningContainer.insertAdjacentHTML('beforeend', html);
    meaningContainer.style.opacity = 1;
  };
  
  function getSynonym() {
    const searches = document.querySelector('#search');
    const search = searches.value.trim();
    // searches.value = '';
  
    if (search === '') return;
    fetch(`https://api.dictionaryapi.dev/api/v2/entries/en_US/${search}`)
      .then(function (response) {
        console.log(response);
        return response.json();
      })
      .then(function ([data]) {
        renderSynonym(data);
      })
      .catch(function (error) {
        console.log(error);
      });
    // searches.value = '';
  }
  
  submit.addEventListener('click', getSynonym);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500&amp;display=swap');
  
  * {
    margin: 0;
    padding: 0;
  }
  
  /* css variables */
  :root {
    --text-color: #001858;
  }
  
  body {
    background: #659999;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f4791f, #659999);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f4791f, #659999);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  
  header {
    color: var(--text-color);
    display: flex;
    font-size: 2em;
    justify-content: center;
    margin-top: 15%;
    margin-bottom: 5%;
  }
  
  .searchBox {
    /* display: flex;
      justify-content: center; */
    background-color: #ced8c5;
    padding: 40px;
    width: 50%;
    /* center a div horizontally if we use margin:0 auto */
    margin: 0 auto;
  }
  
  .find {
    display: block;
    font-size: 30px;
    font-weight: 1000;
    line-height: 2.15;
    margin-bottom: 5px;
  }
  
  #search {
    /* width: 100%; */
    min-width: 100%;
    height: 50px;
    margin-bottom: 10px;
    outline-color: #659999;
  }
  
  #submit {
    height: 40px;
    width: 20%;
  }
  
  #submit:hover {
    background-color: #8fd9a8;
  }
  
  /* 
  .mean.hidden {
      display: inline-grid;
      grid-auto-flow: column;
      gap: 9px;
      list-style-type: none;
      margin-top: 40px;
      overflow-wrap: break-word;
      width: 50%;
      background-color: #fff;
     
  } */
  
  .container {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 2rem;
  }
  
  .meanings {
    display: flex;
    font-size: 1rem;
    background-color: #ced8c5;
    margin-top: 1rem;
    min-width: 30rem;
    min-height: 50%;
    opacity: 0;
    padding: 2rem;
    transition: opacity 1s;
    font-family: inherit;
    overflow: hidden;
  }
  
  .mean {
    background-color: #fff;
    box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
    font-size: 1.8rem;
    min-width: 100%;
    border-radius: 2rem;
    margin: 0 3rem;
    padding: 2rem;
    /* overflow: hidden; */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta name="description" content="Find synonyms, near synonyms." /&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script defer src="script.js"&gt;&lt;/script&gt;
      &lt;title&gt;Synonymous : Find Similar Words&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;h1&gt;Synonymous : Find Synonyms&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;div class="searchBox"&gt;
        &lt;label for="synonymFind" class="find"&gt;Find the Synonym&lt;/label&gt;
        &lt;input
          type="search"
          id="search"
          placeholder="Search Synonymous"
          autocapitalize="off"
          autocomplete="off"
          autofocus
        /&gt;
        &lt;input type="submit" value="Search" id="submit" /&gt;
      &lt;/div&gt;
  
      &lt;main class="container"&gt;
        &lt;div class="meanings"&gt;
          &lt;h1&gt;Synonyms&lt;/h1&gt;
          &lt;!-- &lt;ul class="mean"&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
           &lt;li&gt;...&lt;/li&gt;
       &lt;/ul&gt; --&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>