I have gone through all the previous discussions, but I am still unable to solve this issue. When I hover over a button with the cursor set to pointer, it does not work as expected. Additionally, the hover effect is also not functioning properly. I have included all of my code below, including the JavaScript. I am not sure if the problem lies within the JavaScript, but I highly doubt it.
const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');
const colors = [
'#6C5B7B',
'#C06C84',
'#F67280',
'#F8B195',
'#EC2049',
'A7226E',
'45ADA8'
];
//add event listener
colorBtn.addEventListener('click', changeColor);
function changeColor() {
// bodyBcg.style.backgroundColor = colors[2];
//get random number, Math.floor gives you a number between 0 and 0.9999... so we round down and times by the length of the array
let random = Math.floor(Math.random() * colors.length);
bodyBcg.style.backgroundColor = colors[random];
}body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.colorBtn {
padding: 0.25rem 0.5rem;
border: 3px solid #fefefe;
border-radius: 7px;
color: #fefefe;
background: rgba(0, 0, 0, 0.6);
font-size: 1.5rem;
text-transform: capitalize;
cursor: pointer;
outline: none;
}
.colorBtn:hover {
background: rgb(0, 0, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<button type="button" class="colorBtn">Press to change color</button>
<script src="/script.js"></script>
</body>
</html>