title: JavaScript to change background color of class
body: <p>I feel like I am banging my head against a brick wall here and cant figure out what I have done wrong, I have written some JS to pick a random color from an array and then I want to change the color of class to that color:</p>
  
  <p>I have tried changing the class to just <code>class="button1"</code> aswell but still nothing, I have also added in alerts and everything seems to be passed through ok until the last line of <code>changeElementColor</code> when nothing happens.</p>
  
  <p>Also, I would prefer if I could use something like <code>changeElementColor(this.element)</code> instead of typing it into the HTML, is that possible?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var colorArray = ["#aa3333", "#33aa33", "#3333aa", "#aaaa33", "#33aaaa", "#aa33aa", "#aa6633", "#66aa33", "#33aa66"];
      
      function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
      }
  
      function chooseRandomColor() {
      var randomInt = getRandomInt(0,colorArray.length);
      return colorArray[randomInt];    
      }
  
      function changeElementColor(elementString) {
      alert(elementString);
      var obj = document.getElementsByClassName(elementString);
      alert(obj);
      var color = chooseRandomColor();
      alert(color)
      obj.style.backgroundColor = color;
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    [class^="button"] {
      background-color: #333333;
      float: left;
      margin: 5px;
      color: #aaaaaa;
      text-align: center;
      display: table;
      }
      
      [class^="button"] span {
      display: table-cell; 
      vertical-align: middle; 
      text-align: center; 
      }
      
      .button1 {
      background-color: #3333ff;
      }
      
      .sm-sq-butt {
      font-size: 10px;
      height: 60px;
      width: 60px;
      }
      
      .md-sq-butt {
      font-size: 20px;
      height: 120px;
      width: 120px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;a href="#"&gt;&lt;div onclick="changeElementColor('button1')" class="button1 md-sq-butt"&gt;&lt;span&gt;HOME&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for the help!</p>