Issue
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/
Solution
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"
Answered By - Fauzanadhim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.