title: Inline style edited with JavaScript is being ignored
body: <p>I'm trying to use <code>document.getElementByClassId().style.color</code> to change the color of an element in my HTML document. I can see that it does add an inline style tag to the element but they are seemingly ignored by the browser.</p>
  
  <p>I tried using the <code>!important</code> tag but that changed nothing. Here is my HTML document. I changed my CSS for the elements I want to modify into inline tags but they are ignored as well. Everything else works so far.</p>
  
  <p>Here is my code (I'm a beginner please go easy on me :/).</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>//Only gets used to make the rows array.
  var cells = [];
  
  //Array that contains the entirety of the table element.
  var rows = [];
  
  //Random number to be used to color a random cell.
  var rand = 0;
  
  
  //Unique ID number that gets applied to each cell on the gameboard.
  var id = 0;
  
  //Calls cellMake.
  var makeBoard = function(size) {
      cellMake(size);
  }
  
  //Adds opening and closing tags at the beginning and end of each string then writes them to the rows array.
  var rowMake = function(num) {
      for(c = 0; num &gt; c; c++) {
          rows[c] = '&lt;tr&gt;' + cells[c] + '&lt;/tr&gt;';
      }
      writeBoard();
  }
  
  //Writes cell elements to the cells array based on how many columns the makeBoard function was called for.
  var cellMake = function(num) {
      for(a = 0; num &gt; a; a++) {
          cells[a] = '';
          for(b = 0; num &gt; b; b++) {
              cells[a] += '&lt;td id="' + id + '" class="pixel"&gt;';
              id++;
          }
      }
      rowMake(num);
  }
  
  //Chooses random pixel from the board and sets its color.
  var choosePixel = function() {
      rand = Math.round(Math.random() * rows.length * rows.length);
      console.log(rand);
      document.getElementById(rand).style.color = 'red';
  }
  
  //Writes each element of the rows array onto the HTML document.
  var writeBoard = function() {
      for(d = 0; rows.length &gt; d; d++) {
          document.getElementById('gameboard').innerHTML += rows[d];
      }
      choosePixel();
  }
  
  window.onload = function() {
      makeBoard(50);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Can I write JS?&lt;/title&gt;
          &lt;script src="script.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body {
                  text-align: center;
                  background-color: black;
              }
              #gameboard {
                  display: inline-block;
                  margin: 0 auto;
                  padding-top: 5%;
              }
              .pixel {
                  height: 5px;
                  width: 5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table id="gameboard"&gt;&lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>