I've been attempting to use the js .toggle feature to change the class of a link to turn it from one colour to another onclick.
<html>
<style>
.the-button-inactive {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: black;
}
.the-button-active {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 10px;
background-color: blue;
}
</style>
<body>
<div class="the-button-container">
<a href="#the-image-1" id="the-image-1-id" onclick="myFunction()" class="the-button-inactive"></a>
</div>
<script>
function myFunction() {
var element = document.getElementByID("the-image-1-id");
element.classList.toggle("the-button-active");
}
</script>
</body>
</html>
The link already has the "the-button-inactive" class and I'm trying to switch it to "the-button-active" class on click using the above script though I'm not sure why it's not working. The ultimate goal would be to get the link to change colour from black to blue when clicked and then from blue to black again when another link is clicked.
So far, nothing happens when the link is clicked.
I was able to achieve this previously using buttons instead of links, but have decided to try to tackle this issue using links now.
Here is the jsfiddle I'm using to test this script: https://jsfiddle.net/tqr2h4pb/
you had a typo in your code. Change getElementByID to getElementById and it works fine.
you should always check the console for debugging
it says Uncaught TypeError: document.getElementByID is not a function"
The toggle method won't affect the classes that already exist, which is why .the-button-active is persisting.
HTML:
<a href="#the-image-1" id="the-image-1-id" onclick="myFunction()" class="the-button-inactive">click</a>
Javascript:
function myFunction() {
const element = document.querySelector("#the-image-1-id")
element.classList.toggle("the-button-active")
element.classList.toggle("the-button-inactive");
}
This worked for me to toggle inactive and active states