<div id="color_bg">
    
    <button id="btn" type="button">클릭</button>

  </div>
#color_bg {
  width: 500px;
  height: 500px;
  background-color: black;
}

#btn {
  width: 100px;
  height: 50px;
  line-height: 50px;

  background-color: purple;
  color: #fff;

  font-size: 20px;
}
var colors = [
  'yellow', 'green', 'pink', '#dc143c', 
  'rgba(123, 123, 123, 0.5)'
];

var bg = document.getElementById('color_bg');

var btn = document.getElementById('btn');

btn.addEventListener('click', function() {  

  var random = Math.floor(Math.random() * 5);

  bg.style.backgroundColor = colors[random];
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.