JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <title>Change the background color!</title>

    <script src="app.js"></script>

    <style>
      #title {
        background-color: cadetblue;
        text-align: center;
        text-decoration: underline;
        color: coral;
        padding: 10px;

      }

      #centering {
        margin-top: 250px;
        text-align: center;
      }

      #click-button {
        padding: 25px;
        font-size: 20px;
      }

    </style>
  </head>

  <body>
    <h1 id="title">Change the background color of the page!</h1>
    <div id="centering">
      <button onclick="changeColors()" id="click-button">Click Me!</button>
    </div>
  </body>

</html>

JavaScript

const colorArray = ['blue', 'red', 'orange', 'green', 'yellow', 'black'];

function changeColors() {
	console.log('hello');
  document.body.style.backgroundColor = colorArray[Math.floor(Math.random() * colorArray.length)];

}

/* document.getElementById("click-button").onclick = changeColors();
 */