title: using JS to make tic tac toe
body: <p>I have made a tic tac toe using JS however it has some problems My code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let x = [];
  let o = [];
  let xTurn = false;
  let winPat = [
    ['00', '10', '20'],
    ['01', '11', '21'],
    ['02', '12', '22'],
    ['00', '01', '02'],
    ['10', '11', '12'],
    ['20', '21', '22'],
    ['00', '11', '22'],
    ['02', '11', '20']
  ];
  
  const tableR = document.getElementsByClassName('tableR');
  const button = document.getElementById('btn')
  
  for (let i = 0; i &lt;= 2; i++) {
    for (let j = 0; j &lt;= 2; j++) {
      let newElement = document.createElement('td');
      tableR.item(i).appendChild(newElement);
      newElement.addEventListener('click', () =&gt; {
        if (elementIsEmpty(newElement)) {
          const img = document.createElement('img');
          if (xTurn) {
            img.src = 'https://www.google.com/url?sa=i&amp;url=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3ARed_X.svg&amp;psig=AOvVaw1B-fppvlN2x5oSCGllnXGc&amp;ust=1634565535566000&amp;source=images&amp;cd=vfe&amp;ved=0CAkQjRxqFwoTCMjbg6XN0fMCFQAAAAAdAAAAABAD';
            x.push(String(i) + String(j))
          } else {
            img.src = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2Fd%2Fd0%2FLetter_o.svg%2F407px-Letter_o.svg.png&amp;imgrefurl=https%3A%2F%2Fcommons.wikimedia.org%2Fwiki%2FFile%3ALetter_o.svg&amp;tbnid=p-B77Lz3DDttwM&amp;vet=12ahUKEwizlYTWzdHzAhXMg9gFHTSaBJkQMygAegUIARDaAQ..i&amp;docid=K2HPZsIMOu4d5M&amp;w=407&amp;h=768&amp;q=pixture%20of%20o&amp;ved=2ahUKEwizlYTWzdHzAhXMg9gFHTSaBJkQMygAegUIARDaAQ';
            o.push(String(i) + String(j))
          }
          newElement.append(img)
          checkWinOrDraw(xTurn)
          xTurn = !xTurn
        }
      })
    }
  }
  
  const td = document.getElementsByTagName('td')
  button.addEventListener('click', () =&gt; {
    reset();
  });
  
  function elementIsEmpty(el) {
    return (/^(\s|&amp;nbsp;)*$/.test(el.innerHTML));
  }
  
  function checkWinOrDraw(xTurn) {
    for (let i = 0; i &lt; winPat.length; i++) {
      if (xTurn) {
        if (winPat[i].every(element =&gt; x.includes(element))) {
          alert('X wins')
          reset()
          return
        }
      } else {
        if (winPat[i].every(element =&gt; o.includes(element))) {
          alert('O wins')
          reset()
          return
        }
      }
    }
  
    for (let item of td) {
      if (elementIsEmpty(item))
        return
    }
    alert('Draw')
    reset()
  }
  
  
  function reset() {
    x = [];
    o = [];
    for (let item of td) {
      item.textContent = ''
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
    background-color: #3c4552;
    color: aliceblue;
    text-align: center;
  }
  
  header {
    height: 75px;
    background-color: #1f1e1c;
    padding: 20px;
    font-size: large;
  }
  
  table {
    border-collapse: collapse;
    margin: 40px auto;
  }
  
  td {
    border: 7px solid black;
    height: 121px;
    width: 121px;
    cursor: pointer;
  }
  
  button {
    background-color: #1f1e1c;
    color: white;
    width: 25%;
    height: 50px;
    font-size: larger;
    border: black solid 2px;
    border-radius: 7px;
    cursor: pointer;
  }
  
  img {
    display: block;
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;h1&gt;TicTacToe&lt;/h1&gt;
  &lt;/header&gt;
  &lt;main&gt;
    &lt;table&gt;
      &lt;tr class="tableR"&gt;&lt;/tr&gt;
      &lt;tr class="tableR"&gt;&lt;/tr&gt;
      &lt;tr class="tableR"&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/main&gt;
  &lt;footer&gt;
    &lt;button id="btn"&gt;RESET&lt;/button&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>my problem is that when the game ends, say X wins, the image is not rendered on the screen, and alert() is called. I googled a lot and found no solutions.</p>
  <p>details and clarity:
  the image is not rendered on screen at the end of the game. try on your computer and see. alert() is called before the image is present in-game which results in a bad user experience. hence I need a solution.</p>