title: Changing buttons Id's Javascript not working as intended
body: <p>I am trying to change the text of the same div based on clicks on two buttons. Because printed text should be different each time, I came up with the idea to change button's Id's. As you can see I assign a new id after each click :
  <code>chA.id = ("a1A");</code> but it does not seem to work properly. 
  The turns stop counting after I click <code>Button A</code> or <code>Button B</code> and the text will not change to what I expect. 
  What do I do wrong?:</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> 
  turncount = 0;
  chA = document.getElementById("ButtonA");
  chB = document.getElementById("ButtonB");
  PrnKey = "Intro";
  hideButtons.onclick = () =&gt; {
   bint.style.display = 'none';
  }
  showButtons.onclick = () =&gt; {
   bint.style.display = 'inline';
   
  }
  DivTextBox.onclick = () =&gt; {
          bint.style.display = 'inline';
  };
  
  
  document.getElementById("ButtonA").onclick = function () {
   document.getElementById("DivTextBox").innerHTML = "&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Text explaining Option A&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;";
   turncount ++;
   bint.style.display = 'none';
  
   ButtonA.innerText = `Option A turn ${turncount}`;
   ButtonB.innerText = `Option B turn ${turncount}`;
   chA.id = ("a1A");
   chB.id = ("a1B");
  };
   
  document.getElementById("a1A").onclick = function () {
   document.getElementById("DivTextBox").innerHTML = "&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Text explaining Option a1A&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;";
   turncount ++;
   bint.style.display = 'none';
   a1A.innerText = `Option A turn ${turncount}`;
   a1B.innerText = `Option B turn ${turncount}`;
   chA.id = ("a2A");
   chB.id = ("a2B");
  };
   
   document.getElementById("a1B").onclick = function () {
   document.getElementById("DivTextBox").innerHTML = "&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Text explaining Option a1B&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;";
   turncount ++;
   bint.style.display = 'none';
   a1A.innerText = `Option bA turn ${turncount}`;
   a1B.innerText = `Option bB turn ${turncount}`;
   chA.id = ("b2A");
   chB.id = ("b2B");
  };
   
  
  document.getElementById("ButtonB").onclick = function () {
   bint.style.display = 'none';
   document.getElementById("DivTextBox").innerHTML = "&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Text explaining Option B&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;";
   turncount ++;
   ButtonA.innerText = `Option bA turn ${turncount}`;
   ButtonB.innerText = `Option bB turn ${turncount}`;
   chA.id = ("b1A");
   chB.id = ("b1B");
  };
   
  
   document.getElementById("b1A").onclick = function () {
   document.getElementById("DivTextBox").innerHTML = "&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;Text explaining Option a1B&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;";
   turncount ++;
   bint.style.display = 'none';
   b1A.innerText = `Option b1A turn ${turncount}`;
   b1B.innerText = `Option b1B turn ${turncount}`;
   chA.id = ("b2A");
   chB.id = ("b2B");
  };
   
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="DivTextBox"&gt;Here is Intro &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; T &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
  
  &lt;div id="bint"&gt;
  &lt;button id="ButtonA"&gt;
  Option A
  &lt;/button&gt;
  &lt;button id="ButtonB"&gt;
  Option B
  &lt;/button&gt;
  &lt;/div&gt;
  &lt;button id="hideButtons"&gt;
   Hide Buttons
   &lt;/button&gt;
   &lt;button id="showButtons"&gt;
   Show Buttons
   &lt;/button&gt;
   </code></pre>
  </div>
  </div>
  </p>