如何在纯JavaScript中捕获单击哪个按钮来更改图像？

我想知道在我的函数中单击了哪个按钮。“下一步”按钮工作正常，但我不想为“上一步”按钮设置不同的功能，只是为了降低imageIndex，以便图像可以反转

我是初学者。欢迎提出建设性意见

JS:
    <script>
       var imageArray = ["IMG1","IMG2",
                     "IMG3","IMG4"];

      var imageIndex = 1;

     function changeImage()
     {  
        document.getElementById("currentImg").src = imageArray[imageIndex];
        imageIndex++;   
        if(imageIndex >= imageArray.length)
        {
            imageIndex = 0;
        }
    };          
</script>

HTML:
     <img src="img1" id="currentImg" alt="img">
     <button id="nextBtn" type="button" onclick="changeImage();">Next</button>
     <button id="prevBtn" type="button" onclick="changeImage();">Previous</button>

JS:
var imageArray=[“IMG1”、“IMG2”，
“IMG3”、“IMG4”]；
var指数=1；
函数changeImage（）
{  
document.getElementById（“currentImg”）.src=imageArray[imageIndex]；
imageIndex++；
如果（imageIndex>=imageArray.length）
{
imageIndex=0；
}
};          
HTML:
下一个
以前的

在按钮的事件处理程序中传递此：

onclick="changeImage(this);"

然后，

此

将是对正在单击的按钮的引用。在函数中添加一个参数：

function changeImage(btn) {

这将允许您确定哪个按钮被其ID单击：

btn.id

---

然后是

nextBtn

或

prevBtn

，您可以使用它来检查if语句。

让我们开始吧

JS:

var-imageArray=[“IMG1”、“IMG2”，
“IMG3”、“IMG4”]；
var指数=1；
函数更改图像（val）
{  
document.getElementById（“currentImg”）.src=imageArray[imageIndex]；
imageIndex+val；
如果（imageIndex>=imageArray.length | | imageIndex<0）
{
imageIndex=0；
}
};          

HTML:

下一个
以前的

您可以随时这样做（虽然不是最漂亮的，但仍然有效）

//图像阵列设置在此
功能更改图像（方向）
{  
如果（方向=“左”）{
//左手柄动作
}否则{
//正确处理
}
};
函数goLeft（）{
更改图像（“左”）；
};
函数goRight（）{
更改图像（“右”）；
};          

然后你的按钮可以是：

 <button id="nextBtn" type="button" onclick="goLeft();">Next</button>
 <button id="prevBtn" type="button" onclick="goRight();">Previous</button>

下一步
以前的

玩得开心

     <img src="img1" id="currentImg" alt="img">
     <button id="nextBtn" type="button" onclick="changeImage(1);">Next</button>
     <button id="prevBtn" type="button" onclick="changeImage(-1);">Previous</button>

<script>
   //image array setup here
 function changeImage(direction)
 {  
    if (direction == "left") {
       // handle left action
    } else {
       // handle right action
    }
};
function goLeft(){
changeImage("left");
};
function goRight(){
changeImage("right");
};          
</script>

 <button id="nextBtn" type="button" onclick="goLeft();">Next</button>
 <button id="prevBtn" type="button" onclick="goRight();">Previous</button>