title: Onclick event not changing element ID
body: <p>I'm attempting to code a slide-puzzle in the browser. When the user clicks a square on the grid that's adjacent to the BLANK square, the clicked square should be swapped with the BLANK.</p>
  
  <p>EDIT: This is what it should do when finished: <a href="https://en.wikipedia.org/wiki/15_puzzle" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/15_puzzle</a></p>
  
  <p>I'm trying to achieve this using onclick triggers to call a JavaScript function that first checks if the square is a valid move, then switches the ID attribute of the square. My CSS file contains the image for each square, linked to the square's ID.</p>
  
  <p>As it stands, the squares do nothing when clicked.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="Puzzle.css"&gt;
    &lt;title&gt;Fifteen Puzzle&lt;/title&gt;
    &lt;script type="text/javascript" src="Puzzle.js" defer="defer"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="startPuzzle()"&gt;
    &lt;div class="container"&gt;
      &lt;div class="square" id="square0" onclick="A.slide(0, 0, this.id)"&gt; &lt;/div&gt;
      &lt;div class="square" id="square1" onclick="A.slide(1, 0, this.id)"&gt;  &lt;/div&gt;
      &lt;div class="square" id="square2" onclick="A.slide(2, 0, this.id)"&gt;  &lt;/div&gt;
  /* And so on to the 16th square: */
      &lt;div class="square" id="squareBLANK" onclick="A.slide(3, 3, this.id)"&gt;  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JAVASCRIPT FILE:</p>
  
  <pre><code>class Puzzle {
      constructor () {
      this.board = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, "_"]];
      }
  
      slide (i, j, a){
          x = this.board[i][j];
          if (this.board[i+1][j] == "_") {
              this.board[i+1][j] = x;
              this.board[i][j] = "_";
              document.getElementById(a).id = "PLACEHOLDER";
              document.getElementById("squareBLANK").id = a;
              document.getElementById("PLACEHOLDER").id = "squareBLANK";
          }
          else if (this.board[i][j+1] == "_") {
              this.board[i][j+1] = x;
              this.board[i][j] = "_";
              document.getElementById(a).id = "PLACEHOLDER";
              document.getElementById("squareBLANK").id = a;
              document.getElementById("PLACEHOLDER").id = "squareBLANK";
          }
          else if (this.board[i][j-1] == "_") {
              this.board[i][j-1] = x;
              this.board[i][j] = "_";
              document.getElementById(a).id = "PLACEHOLDER";
              document.getElementById("squareBLANK").id = a;
              document.getElementById("PLACEHOLDER").id = "squareBLANK";
          }
          else if (this.board[i-1][j] == "_") {
              this.board[i-1][j] = x;
              this.board[i][j] = "_";
              document.getElementById(a).id = "PLACEHOLDER";
              document.getElementById("squareBLANK").id = a;
              document.getElementById("PLACEHOLDER").id = "squareBLANK";
          }   
      }
  
  
      }
  
      function startPuzzle() {let A = new Puzzle();}
  </code></pre>
  
  <p>So, can anyone tell what's preventing the squares from moving?</p>