I recently implemented a Bootstrap dropdown button from this source (the second one with an "a" element, turning my button into a link). Everything seems to be working perfectly, except for one thing - I can't get the background color of the button to change when it is clicked. It stubbornly remains the default grey along with the light grey border. My goal is to alter the background color upon clicking the button.
Below is the code snippet:
(Just to clarify, my HTML structure uses li tags as I'm incorporating the dropdown button as a menu item for navigation. Additionally, I have used span instead of div because it helps in proper alignment without forming a block.)
HTML:
<span class="dropdown show">
<li>
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="myFunction()">Help</a>
<span class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</span>
</li>
</span>
CSS:
#color-change {
background-color: #00ffba;
}
Javascript:
function myFunction() {
document.getElementById("color-change");
}
I've searched online and attempted various methods to change the background color on click, but nothing has worked so far. I suspect there might be some interference with the list and/or span elements disrupting the JavaScript functionality, particularly in conjunction with Bootstrap. There's also a possibility that my Javascript code is incorrect. Any insights or solutions would be greatly appreciated!
`