Javascript function for simple slider not executing onclick -

hello , looking up. have decided learn javascript trial , error , googling stuff need. far good, when tried bit tricky, slider, things got tough.

i dont have knowledge syntax in javascript , how expressions should written in functions trying.

so here have simple 4 images in div 2 arrows slider. when click arrow want counter decrease 1, want sure doesnt equal 0 , if change 4, , when done give respective image ( img[counter] ) z index of 50 example. doesnt work. reason.

here fiddle of whole thing , hope dont trouble guys this.

https://jsfiddle.net/wu2lysrv/3/

function slideengine() {     var img1 = document.queryselector("#img1");     var img2 = document.queryselector("#img2");     var img3 = document.queryselector("#img3");     var img4 = document.queryselector("#img4");     var counter = 1;      function slidel() {         counter--;         if (counter == 0) {             counter = 4;         }         img[counter].setattribute("z-index", "50");     } } 

i understand if goes aggro, since bet piece of code on there very wrong. still learn how do right.

the slidel function lives inside slideengine, html doesn't have direct access it.

one potential fix remove wrapping function, since doesn't seem used anywhere. however, there other issues code prevent working. i've attempted fix below.

var img1 = document.queryselector("#img1"); var img2 = document.queryselector("#img2"); var img3 = document.queryselector("#img3"); var img4 = document.queryselector("#img4"); var counter = 1;  function slidel() {     counter--;     if (counter == 0) {         counter = 4;     }     window['img'+counter].style.zindex = 50; } 

i didn't tes this, try out.