So I’m trying to make a page with a single button that changes the background colour of the page but when I click the button nothing happens. And I don’t know what I’ve done wrong? Any help would be appreciated!
Regards
Ma3_str0
My JS and HTML code:
const colorArray = ['blue','red','orange','green','yellow','black'];
function changeColors(){
document.body.style.backgroundColor = colorArray[Math.floor(Math.random() * colorArray.length)];
}
document.getElementById("click-button").onclick = changeColors();
<!DOCTYPE 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 id="click-button">Click Me!</button>
</div>
</body>
</html>