javascript - How to call async function to use return on global scope -

i'm struggling function call, when call function if statement work when call outside doesn't, if statement checks button pressed i'm trying remove function button , call app starts.

we @ fetchjokes() inside jokecontainer.addeventlistener('click', event => {

this current code:

const jokecontainer = document.queryselector('.joke-container'); const jokesarray = json.parse(localstorage.getitem("jokesdata"));  // fetch joke count api endpoint async function sizejokesarray() {   let url = 'https://api.icndb.com/jokes/count';   let data = await (await fetch(url)).json();   data = data.value;   return data; }  // use api endpoint fetch jokes , store in array async function fetchjokes() {   let url = `https://api.icndb.com/jokes/random/${length}`;   let jokesdata = [];   let data = await (await fetch(url)).json();   data = data.value;   (jokeposition in data) {     jokesdata.push(data[jokeposition].joke);   }   return localstorage.setitem("jokesdata", json.stringify(jokesdata));; }  const jokedispenser = (function() {   let counter = 0; //start counter @ position 0 of jokes array   function _change(position) {     counter += position;   }   return {     nextjoke: function() {       _change(1);       counter %= jokesarray.length; // start 0 if end of array       return jokesarray[counter];     },     prevjoke: function() {       if (counter === 0) {         counter = jokesarray.length; // place our counter @ end of array       }       _change(-1);       return jokesarray[counter];     }   }; })();  // pass selected joke print on html element function printjoke(joke) {   document.queryselector('.joke-text p').textcontent = joke; }  sizejokesarray().then(size => (length = size)); // size of array in response  jokecontainer.addeventlistener('click', event => {   if (event.target.value === 'fetch') {         fetchjokes(length);   } else if (event.target.value === 'next') {     printjoke(jokedispenser.prevjoke(jokesarray));   } else if (event.target.value === 'prev') {     printjoke(jokedispenser.nextjoke(jokesarray));   } }); 

and i'm trying this:

// pass selected joke print on html element function printjoke(joke) {   document.queryselector('.joke-text p').textcontent = joke; }  sizejokesarray().then(size => (length = size)); // size of array in response fetchjokes(length);  jokecontainer.addeventlistener('click', event => {   if (event.target.value === 'next') {     printjoke(jokedispenser.prevjoke(jokesarray));   } else if (event.target.value === 'prev') {     printjoke(jokedispenser.nextjoke(jokesarray));   } }); 

by way, i'm aware currently, can't iterate through array elements using prev , next button without refreshing page guess question.

couldn't think of better title.(edits welcomed)

async functions are, name implies, asynchronous. in

sizejokesarray().then(size => (length = size)); // size of array in response fetchjokes(length); 

you calling fetchjokes before length = size executed because, may have guessed, sizejokesarray asynchronous.

but since using promises fix straightforward:

sizejokesarray().then(fetchjokes); 

---

if have not understood yet how promises work, maybe https://developers.google.com/web/fundamentals/getting-started/primers/promises helps.

wiki