html - Javascript- Onclick function not working -

i have code changing class of element onclick using pure javascript. pretty confused when code did not work have used same code many times before , worked perfectly. here relevant part of code -

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: 0.5s ease-in-out;     background-color: #24e; } .red{     width: 300px;     height: 300px;     position: absolute;     margin-top: 20%;     margin-left: 20%;     -webkit-transition: 0.5s ease-in-out;     z-index: 9876543210;     background-color: #e69; } 

javascript-

function a(){   this.classlist.toggle('blue');   this.classlist.toggle('red'); } document.queryselector('#div').addeventlistener('click', a); 

i have linked page online jquery ( if makes difference ). when click on "div" nothing happens.

please suggest method past problem.

if have jquery included , can use .click() function capture click event of div. toggle between class, use toggleclass. blue first class added , hence , red toggled div

$('#div').click(function(){        $('#div').toggleclass("blue red"); })