Change Content - Javascript

Change html element content using pure javascript author(s): Deepu Mohan Puthrote (WarFox)

by dalian_bigface

HTML

<button id="print">Print</button>
    <div id="block">
      <ul id="results"></ul>
    </div>

JavaScript

const arr = [1, 2, 3];

const resultList = document.querySelector('#results');
const block = document.querySelector('#block');

const getData = (value) =>
  new Promise((res) =>
    setTimeout(() => {
      res(value);
    }, 1000 * Math.random())
  );

const getAllData = async () => {
  await Promise.all(
    arr.map((a) =>
      getData(a).then((result) => {
        const item = document.createElement('li');
        item.setAttribute('id', 'item');
        item.innerText = result;
        resultList.appendChild(item);
        console.log(result);
      })
    )
  );
  const text = document.createElement('p');
  text.setAttribute('id', 'text');
  text.innerText = 'Done!';
  block.appendChild(text);
  console.log('done!');
};

/* getAllData(); */

const printBtn = document.querySelector('#print');
printBtn.addEventListener('click', () => {
  const items = document.querySelectorAll('#item');
  items.forEach((i) => resultList.removeChild(i));
  const text = document.querySelector('#text');
  if (text) {
    text.remove();
  }
  getAllData();
});