Problem generating causal sentences with js [closed]

I am creating a sentence translation app, but I have a problem with the generation of causal sentences. I have to generate the sentences with an external url, but in my code instead of generating me a whole sentence, it only generates one character. Can you help me understand where I am going wrong?

```
<main>
  <section class="panel translation">
    <div class="translation-flag"></div>
    <button class="favorites">⭐</button>
    <div class="translation-result">
      <p class="translation-text">Traduzione</p>
    </div>
  </section>

  <section class="panel controls">
    <input class="text-input" type="text" placeholder="inserisci il testo da tradurre">
    
    <button class="lang-button" data-lang="en">🇬🇧</button>
    <button class="lang-button" data-lang="fr">🇫🇷</button>
    <button class="lang-button" data-lang="es">🇪🇸</button>
    <button class="reset-button">❌</button>
    <button class="random-button">
      <i class="fa-solid fa-dice icon-dice"></i>
    </button>
  </section>

  <div class="panel translate">
    <h1>Le tue parole preferite</h1>
   <ul class="translate-favorites">
    
   </ul> 

    </p>
  </div>
</main>



 const langButtons = document.querySelectorAll('.lang-button');
const textInput = document.querySelector('.text-input');
const translationText = document.querySelector('.translation-text');
const translationFlag = document.querySelector('.translation-flag');
const resetButton = document.querySelector('.reset-button');
const randomButton = document.querySelector('.random-button');


//Funzione per aggiornare la lista delle traduzioni preferite
function updateFavoriteList(translation) {
  const translateFavorite = document.querySelector('.translate-favorites');
  translateFavorite.innerHTML = '';
    translation.forEach(function(translateTexts) {
      const li = document.createElement('li');
      li.textContent = translateTexts;
      translateFavorite.appendChild(li);
    });
}

async function translate(text, lang, flag) {
  const url = `https://api.mymemory.translated.net/get?q=${text}&langpair=it|${lang}`;
  const response = await fetch(url);
  const jsonData = await response.json();
  const result = jsonData.responseData.translatedText;
  console.log(result);

  translationText.innerText = result;
  translationFlag.innerText = flag;
}

langButtons.forEach(function(langButton) {
  langButton.addEventListener('click', function() {

    // recupero il testo dal campo di input e rimuovo eventuali spazi extra
    // all'inizio e alla fine della stringa inserita con il metodo .trim()
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim
    const text = textInput.value.trim();

    // recupero il codice lingua dal data-attribute del pulsante
    const lang = langButton.dataset.lang;
    // recupero la bandierina dalla testo del pulsante
    const flag = langButton.innerText;

    // se il campo di input ha effettvamente del testo
    // invoco la funzione e faccio partire la chiamata alle API
    if(text.length > 0) {
      translate(text, lang, flag);
    }
  });
});

randomButton.addEventListener('click', function() {
  const randomUrls = 'https://random-word-api.herokuapp.com/word?length=5';
  const randomIndex = Math.floor(Math.random() * randomUrls.length);
  const randomWork = randomUrls[randomIndex];
  console.log(randomWork);
  textInput.value = randomWork;
});



resetButton.addEventListener('click', reset);
```

The new code for the my question is:
```
async function randomString() {
  const response = await fetch('https://random-word-api.herokuapp.com/word?lang=it');
  const work = await response.json();
  console.log(work);
  textInput.value = work;
}

randomButton.addEventListener('click', function() {
  randomString();
});
```