Javascript 图像滑块按钮未检测到单击？

我有一个图像滑块，它使用setInterval（）单独旋转图像。但是，我添加到控制单击哪个图像的按钮没有响应单击事件

我使用过addEventListener，目前正在使用.on（'click'），但两者都不起作用

HTML:

JS:

$（文档）.ready（函数（）{
/*var leftbtn=document.getElementById（“leftArrow”）；
var rightbn=document.getElementById（“rightArrow”）*/
var-imagecount=0；
var总计=4；
console.log（imagecount）；
功能滑块（x）{
var Image=document.getElementById（'slideImage'）；
imagecount=imagecount+x；
如果（imagecount>总计）{
imagecount=0；
} 
如果（imagecount<0）{
imagecount=总数；
} 
Image.src=“资产/Image”+imagecount+.png”
}
setInterval（函数sliderA（）{
var Image=document.getElementById（'slideImage'）；
imagecount=imagecount+1；
console.log（imagecount）；
如果（imagecount>总计）{
imagecount=0；
}
如果（imagecount<0）{
imagecount=总数；
}
Image.src=“资产/Image”+imagecount+.png”
},5000);
//事件侦听器
/*leftbtn.addEventListener（“单击”，滑块（-1））；
rightbtn.addEventListener（“单击”，滑块（1））*/
$（文档）。在（'单击'，'左箭头'，滑块（-1））；
$（文档）。在（'单击'，'向右箭头'，滑块（1））；
}); //医生准备好了吗

您必须传递事件处理程序（回调），而不是调用该函数

$(document).on('click', '#leftArrow', function() {
    slider(-1);
});
$(document).on('click', '#rightArrow', function() {
    slider(-1);
});

---

晚了5秒，我正要写同样的东西D非常感谢@Martin我会尽可能接受答案

#sliderContainer {
    width: 700px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 5% !important;
}

#sliderImage {
    width: 700px;
    height: 500px;
    position: absolute;
}

#left_holder {
    height: 500px;
    width: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
}

#right_holder {
    height: 500px;
    width: 100px;
    position: absolute;
    right: 0px;
    top: 0px;
}

#leftArrow {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    left: 0px;
}

#rightArrow {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 45%;
    right: 0px;
}

$(document).ready(function () {


/*var leftbtn = document.getElementById("leftArrow");
var rightbtn = document.getElementById("rightArrow");*/
var imagecount = 0;
var total = 4; 
console.log(imagecount);

function slider(x) {
    var Image = document.getElementById('sliderImage');
    imagecount = imagecount + x;

    if (imagecount > total) { 
        imagecount = 0;
    } 

    if(imagecount < 0) {
        imagecount = total;
    } 
    Image.src = "assets/image" + imagecount + ".png"
}

window.setInterval(function sliderA() {
var Image = document.getElementById('sliderImage');
imagecount = imagecount + 1;
    console.log(imagecount);

    if (imagecount > total) {
        imagecount = 0;
    }

   if (imagecount < 0) {
       imagecount = total;
   }

Image.src = "assets/image" + imagecount + ".png" 
},5000);


//EVENT LISTENERS
/*leftbtn.addEventListener("click", slider(-1));
rightbtn.addEventListener("click", slider(1));*/
$(document).on('click', '#leftArrow', slider(-1));
$(document).on('click', '#rightArrow', slider(1));

}); //Doc Ready

$(document).on('click', '#leftArrow', function() {
    slider(-1);
});
$(document).on('click', '#rightArrow', function() {
    slider(-1);
});