title: style.backgroundColor doesn't work?
body: <p>Tried to change the color of a cell by clicking on it. </p>
  
  <p>The cells are normaly grey and by the first click they should turn red. When I click on a red cell it should turn grey again.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeColor(cell) {
    var red = '#FE2E2E';
    var grey = '#E6E6E6';
  
    if (cell.style.backgroundColor == grey) {
      cell.style.backgroundColor = red;
    } else {
      if (cell.style.backgroundColor == red) {
        cell.style.backgroundColor = grey;
      }
    };
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#table tr td {
    width: 20px;
    height: 50px;
    cursor: pointer;
    background-color: #E6E6E6;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table table-bordered" id="table"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td onclick="changeColor(this)"&gt;&lt;/td&gt;
        &lt;td onclick="changeColor(this)"&gt;&lt;/td&gt;
        &lt;td onclick="changeColor(this)"&gt;&lt;/td&gt;
        &lt;td onclick="changeColor(this)"&gt;&lt;/td&gt;
        &lt;td onclick="changeColor(this)"&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried with <code>.style.bgColor</code>, <code>rgb</code> and <code>if (cell.style.backgroundColor ===</code> but this didn't work either. The value of the cells background color is either by <em>.backgroundColor</em> : <strong>''</strong> or by <em>.bgColor</em> : <strong>undefined</strong>.</p>