title: How do I change the background color in JavaScript?
body: <p>I am trying to change the background color of the wrapper every time I click the button. When it is clicked, it is supposed to change to a random color that is in the array. Any thoughts for a beginner? Also the CSS was done with SASS so it may not look pretty.</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>function change_Color() {
    var color = ["blue", "red", "green", "yellow"];
    document.getElementById("wrapper").style.backgroundColor = color;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  #wrapper {
    width: 100%;
    height: 100vh;
    background-color: skyblue;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      padding: 10px;
      background: orange;
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 2rem;
      transition: .5s ease;
      &amp;:hover {
        box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
        cursor: pointer;
      }
      &amp;:focus {
        outline: 0;
        color: skyblue;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;button onclick="change_Color()"&gt;Click me!&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>