I encountered an issue while trying to change the class of an element using pure Javascript upon clicking it. Even though I have used similar code successfully in the past, this particular instance did not work as expected. Here is the relevant part of the code snippet -
HTML-
<div id="div" class="blue">.</div>
CSS-
.blue{
width: 500px;
height: 500px;
z-index: 9876543210;
position: absolute;
margin-top: 20%;
margin-left: 20%;
-webkit-transition: all 0.5s ease-in-out;
background-color: #24e;
}
.red{
width: 300px;
height: 300px;
position: absolute;
margin-top: 20%;
margin-left: 20%;
-webkit-transition: all 0.5s ease-in-out;
z-index: 9876543210;
background-color: #e69;
}
JAVASCRIPT-
function toggleClass(){
this.classList.toggle('blue');
this.classList.toggle('red');
}
document.querySelector('#div').addEventListener('click', toggleClass);
In addition, I have included a link to jQuery on the page (not sure if that affects anything). However, despite everything set up correctly, nothing happens when I click on the "div".
Please share any suggestions or solutions to help resolve this issue.