style.backgroundColor doesn't work?
<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>