Home Can I change the class of a link from one class to another using javascript?

Questions

Can I change the class of a link from one class to another using javascript?

June 24, 2022

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/