Aside from the necessity of changing red to "red" with quotes and () to function(), your JavaScript code is correct. The problem arises from the class bg-dark. It appears that Bootstrap has designated this background color as !important, making it unchangeable. To resolve this issue, I suggest removing the class and styling the background using CSS rather than Bootstrap, without the !important tag. This way, your JavaScript code will successfully alter the background color.
To demonstrate, I renamed the class bg-dark to something random like bg-dark-temp for #showcasea. Now, your JavaScript code functions properly (I also eliminated the empty href in colorClicker for your button to work).
Feel free to view the updated code below:
var clicka = document.getElementById('colorClicker');
var bgchange = document.getElementById('showcasea');
clicka.addEventListener("click", function() {
bgchange.style.backgroundColor = "red";
});
.bg-dark-temp {
background-color: #212529;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2ccd2cd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013025f1b111d1c0132435c415c42">[email protected]</a>/font/bootstrap-icons.css">
<link rel="stylesheet" href="C:\Users\Elite\Desktop\bootstrap-travesy\css\style.css">
<title>Frontend Bootcamp</title>
</head>
...
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e2f9e7f9e6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="coolStuff.js"></script>
</body>
</html>