Fetch an array from API endpoint in async function
I've improved a few things to your script, making it more consistent over all:


;(function () {
  const jokeContainer = document.querySelector('.joke-container')

  async function fetchCount() {
    const url = 'https://api.icndb.com/jokes/count'
    const { value } = await (await fetch(url)).json()

    return value
  }

  async function fetchJokes(length = fetchCount()) {
    const url = `https://api.icndb.com/jokes/random/${await length}`
    const { value } = await (await fetch(url)).json()

    return value.map(({ joke }) =&gt; joke)
  }

  jokeContainer.addEventListener('click', async event =&gt; {
    if (event.target.value === 'Fetch') {
      const jokes = await fetchJokes()

      console.log(jokes)
    }
  })
}())
&lt;div class="joke-container"&gt;
  &lt;div class="joke-text"&gt;
    &lt;p&gt;Fetch some jokes bro!!&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="joke-controls"&gt;
    &lt;button type="button" value="Fetch"&gt;Fetch Jokes&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;




Wrapped your script in an IIFE to avoid polluting the global scope.
Removed your bizarre usage of the global length variable, which you defined without using var, let, or const, and is considered bad practice.
Used object destructuring to improve the readability of your code in some places.
Declared your event listener as async in order to take advantage of await instead of using a then() chain to improve consistency and readability.
Converted your imperative initialization of jokesData into a functional idiomatic approach using Array#map() in order to further improve readability.