title: Why doesn't the genNewColor function work?
body: <p>This code is supposed to generate a random color. I'm not sure why it isn't working, I believe it has something to do with the function since the css formatting works great. When I run the code, I don't get any error messages, the code just simply doesn't work.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;
   Color Generator 
  &lt;/title&gt;
  &lt;style&gt;
  body{
   margin: 0;
   padding: 0;
   background: #161818;
   font-family: "Consolas";
  }
  .color{
   margin-top: 300px;
   text-align: center;
  }
  #hex{
   display: block;
   color: white;
   font-size: 100px;
   text-transform: uppercase;
   margin: 0px;
  }
  .color button{
   background: none;
   outline: 10px;
   color: white;
   cursor: pointer;
   font-size: 40px;
   border: 3px solid white;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="color"&gt;
    &lt;span id="hex"&gt;#??????&lt;/span&gt;
    &lt;button onclick="genNewColor()"&gt;Generate New Color&lt;/button&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
   function genNewColor() {
    var symbols,color;
    symbols = "0123456789ABCDEF";
    
    color = "#";
    for(var i =0;i&lt;6;i++){
     color = color + symbols[Math.floor(Math.random() * 16)]
    }
    document.body.style.background = color;
    document.getElementById("hex").innerHTML = color
   }
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>