title: How to make dynamic value array change value on element change
body: <p>I am trying to make 3 Men's Morris game. I created the game but there is little error or problem. When drag a ball to box its value pushed to <strong>Array</strong> but again drag the same ball to other box it pushed a new value to <strong>Array</strong> if the same ball match pattern it says user won without inserting other balls to game. Could there be a method to remove only the current ball value from <strong>Array</strong>. And could be any method to make the other player bot to auto play against like in tic tac toe.
  Here is my JavaScript :</p>
  <pre><code>let goalBoxes = document.querySelectorAll(&quot;.goal&quot;);
  let user1 = [ ];
  let user2 = [ ];
  
  // Possible Win patterns
  let pattern = [
    [1, 2, 3], // first row
    [4, 5, 6], // second row
    [7, 8, 9], // third row
    [1, 4, 7], // first column
    [2, 5, 8], // second column
    [3, 6, 9], // third column
    [1, 5, 9], // diagonal 1
    [3, 5, 7] // diagonal 2
  ];
  
  // Check if anyone win or not
  function checkWinner(user) {
    let won = false;
    pattern.forEach((row) =&gt; {
      if (
        user.indexOf(row[0]) &gt; -1 &amp;&amp;
        user.indexOf(row[1]) &gt; -1 &amp;&amp;
        user.indexOf(row[2]) &gt; -1
      ) {
        return (won = true);
      }
    });
    return won;
  }
  
  function dragStart(event) {
    event.dataTransfer.setData(&quot;.&quot;, event.target.id);
  }
  
  function onDrop(event) {
    const id = event.dataTransfer.getData(&quot;.&quot;);
    const dragElem = document.getElementById(id);
    const patternIndex = event.target.getAttribute(&quot;data-index&quot;);
    event.target.appendChild(dragElem);
  
    // Adding pattern values
    if (event.target.firstChild.className == &quot;ball&quot;) {
      user1.push(parseInt(patternIndex));
    } else {
      user2.push(parseInt(patternIndex));
    }
  
    // Checking for Winner
    checkWinner(user1);
    checkWinner(user2);
  
    // Showing message on the screen
    if (checkWinner(user1) == true) {
      alert(&quot;User1 have won&quot;);
    } else if (checkWinner(user2) == true) {
      alert(&quot;User2 have won&quot;);
    }
  }
  
  goalBoxes.forEach((goal) =&gt; {
    goal.addEventListener(&quot;dragover&quot;, (event) =&gt; {
      event.preventDefault();
    });
  });
  
  </code></pre>
  <p>This is my codepen if want more details <a href="https://codepen.io/ghulamshabeer/pen/qBVavEg" rel="nofollow noreferrer">https://codepen.io/ghulamshabeer/pen/qBVavEg</a></p>