Swapping CSS with a Click addEventListener in JavaScript -

i having trouble getting click event work on page. have div id of 'icon', , class of 'lock', , want able click on div's background image change class 'lock' 'locked'.

before confusion happens, have both classes in external css file, , add background image div. also, don't want use jquery, addeventlistener function. far, js looks like:

var ellock = document.getelementbyid('icon'); function changelock(){     var imgswitch = ellock.getattribute('class');     if(imgswitch !== 'unlock'){         ellock.classname = 'unlock';      }else{         ellock.classname('lock');     } }  ellock.addeventlistener('click', changelock, false); 

the desired result in youtube video: https://www.youtube.com/watch?v=oi2srcn7cim

any appreciated. love learn mistakes i've made.

i use element.classlist property rather you're doing here ...

then do:

ellock.addeventlistener('click', function() {     ellock.classlist.toggle('lock') },     false); 

and leave unlock default class on element. every time click on element, toggle lock class on-and-off, , can use cascading properties of css override background properties on default unlock class.