title: How can I execute one for-loop function, then call another function after the for-loop function is complete with a button?
body: <p>I am trying to run a function after parsing some CSV with Papaparse on button click.  I can only make it work with two buttons which is not the best.  I actually have some more code that will update the selected_csv array with push() method.</p>
  <p>What I want to do is feed the selected-csv array to Papaparse for-loop and push() the results to combined_array, which is then use by the gentable function to append a table of images.  I have tried async and wait thinking it would be as simple as adding async and wait in both function.  But that didn't work at all.</p>
  <p>Any help would be greatly appreciated.  I have gotten this far by reading a lot of stackoverflow questions and modifying.  But I can not seems to get the last bit to work.</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var combined_arrays = [];
  
  function update() {
    var selected_csv = ['https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%201%20(State)%20(with%20subtitles).csv', 'https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%202%20(Condition)%20(with%20subtitles).csv'];
    //parse each entry of array and gen cards
    for (let l = 0, n = selected_csv.length; l &lt; n; l++) {
      Papa.parse(selected_csv[l], {
        download: true,
        delimiter: ",",
        skipEmptyLines: true,
        header: true,
        complete: function(result) {
          //let selected_data = result.data;
          combined_arrays.push(...result.data);
        }
      });
    };
  };
  
  
  function gentable() {
    var comb = combined_arrays;
    var columns = 6,
      table = document.createElement('table'),
      tbody = table.appendChild(document.createElement('tbody')),
      tr, td, img;
    let display = document.getElementById("cards");
    for (i = 0, l = comb.length; i &lt; l; i++) {
      if (i % columns == 0) tr = tbody.appendChild(document.createElement('tr'));
      let card = document.createElement("div");
      card.setAttribute('class', 'card');
      let qimages = document.createElement('img');
      qimages.setAttribute('class', 'qimages');
      qimages.setAttribute('src', '../.assets/' + comb[i].value);
      tr.appendChild(document.createElement('td'))
        .appendChild(card)
        .appendChild(qimages)
      //.src = '../.assets/' + combined_arrays[i].value;
    }
    display.appendChild(table).setAttribute('class', 'card_table');
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"&gt;&lt;/script&gt;
  &lt;div id='cards'&gt;
  
  &lt;/div&gt;
  &lt;button onclick='update()'&gt;
  testing
  &lt;/button&gt;
  &lt;button onclick='gentable()'&gt;
  gentable
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>