I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curious about how to make the button clickable multiple times to continuously randomize the background. Currently, after clicking once, I have to refresh the page to trigger another change.
let btn = document.getElementById('btn');
let randomR = parseInt(Math.floor(Math.random() * 255))
let randomG = parseInt(Math.floor(Math.random() * 255))
let randomB = parseInt(Math.floor(Math.random() * 255))
function backColor() {
document.body.style.backgroundColor = 'rgb(' + randomR + ',' + randomG + ',' + randomB + ')';
}
btn.addEventListener('click', backColor)* {
text-align: center;
margin: 3% auto;
color: #fff;
background-color: #F07DEA;
}
button {
height: 40px;
width: 100px;
border: solid 2px #000;
border-radius: 5px;
background-color: #EEEEEE;
color: #000;
}
button:hover {
background-color: #000;
color: #fff;
border: solid 2px #fff;
}<body>
<button class="btn-class" id="btn" onclick="backColor()">
Click Me!
</button>
</body>