如何捕获单击哪个按钮以更改纯JavaScript中的图像

How do I capture which button is clicked to change images in pure JavaScript?

本文关键字：JavaScript 图像 单击 何捕获 按钮      更新时间：2023-09-26

我想弄清楚在我的函数中点击了哪个按钮。"下一步"按钮工作正常，但我不想为"上一个"按钮制作不同的功能，只是为了减少图像索引，以便图像可以反转。

初学者在这里。欢迎提出建设性意见。

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>
在

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

onclick="changeImage(this);"

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

function changeImage(btn) {

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

btn.id
然后，您可以使用

nextBtn或prevBtn，例如，您可以使用它们来签入 if 语句。

让我们开始工作吧！

.JS：

   var imageArray = ["IMG1","IMG2",
                 "IMG3","IMG4"];
  var imageIndex = 1;
 function changeImage(val)
 {  
    document.getElementById("currentImg").src = imageArray[imageIndex];
    imageIndex + val;   
    if(imageIndex >= imageArray.length || imageIndex < 0)
    {
        imageIndex = 0;
    }
};

.HTML：

     <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>

玩得愉快！

相关文章：