title: Trying to make a clickable table that changes a value in an unordered list
body: <p>Disclaimer: This is my first post and I'm very new to coding. Trying my darndest to teach myself coding out of sheer interest and determination. Please let me know if anything in my code can be improved upon or if I should be doing things differently. Be gentle lol</p>
  
  <p>Right now I'm working on a little project that a dev gave me to help me get the basics down. He had me create a 3x3 table and make it so when I click a square it turns black, and when its clicked again it turns back to white.</p>
  
  <p>My next goal is to make an unordered list that has the color of each square written out and changes as the squares are clicked. Such as:</p>
  
  <p>R1C1 is white......  <strong><em>click</em></strong>......  R1C1 is black.</p>
  
  <p>I've burnt a lot of grey matter over this and cant seem to figure it out. Ive tried approaching it in a lot of different ways to no avail. Thanks in advance for any and all help.</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-css lang-css prettyprint-override"><code>td {
    background: white;
    cursor: pointer;
    padding 2px
  }
  
  td.black-cell {
    background: black;
  }
  
  .hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My Game&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="game2css.css"&gt;
    &lt;style&gt;
        table {
        width: 50%;
        height: 50%;
      }
      
      td,
      th {
        border: 2px solid;
        padding: 10px;
       }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td onclick='myFunction()' id="top-left"&gt; &lt;/td&gt;
        &lt;td id="top-middle"&gt;&lt;/td&gt;
        &lt;td id="top-right"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td id="middle-left"&gt;&lt;/td&gt;
        &lt;td id="middle-middle"&gt;&lt;/td&gt;
        &lt;td id="middle-right"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td id="bottom-left"&gt;&lt;/td&gt;
        &lt;td id="bottom-middle"&gt;&lt;/td&gt;
        &lt;td id="bottom-right"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;UL id="BWList"&gt;
      &lt;li id="r1c1"&gt;Row 1, Column 1 is white.&lt;/li&gt;
      &lt;li id="r1c2"&gt;Row 1, Column 2 is white.&lt;/li&gt;
      &lt;li id="r1c3"&gt;Row 1, Column 3 is white.&lt;/li&gt;
      &lt;li id="r2c1"&gt;Row 2, Column 1 is white.&lt;/li&gt;
      &lt;li id="r2c2"&gt;Row 2, Column 2 is white.&lt;/li&gt;
      &lt;li id="r2c3"&gt;Row 2, Column 3 is white.&lt;/li&gt;
      &lt;li id="r3c1"&gt;Row 3, Column 1 is white.&lt;/li&gt;
      &lt;li id="r3c2"&gt;Row 3, Column 2 is white.&lt;/li&gt;
      &lt;li id="r3c3"&gt;Row 3, Column 3 is white.&lt;/li&gt;
    &lt;/UL&gt;
    &lt;script&gt;
      $(function() {
        $('td').click(function() {
          $(this).toggleClass("black-cell");
        });
      });
  
      function myFunction() {
        var textnode = document.createTextNode("Black")
        var item =
          document.getElementById("r1c1").childNodes[0];
        item.replaceChild(textnode, item.childNodes[0]);
      }
      // I'm fairly positive this is the wrong approach but included it just to show one way that I
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/9dwkhLyz/1/" rel="nofollow noreferrer">https://jsfiddle.net/9dwkhLyz/1/</a></p>