Fatal编程技术网

使用JavaScript更改图像按钮

javascript html

使用JavaScript更改图像按钮,javascript,html,Javascript,Html,我看了一下，寻找我的答案，但发现对于这样一个简单的过程来说，代码太长了。 下面，我的代码显示了一个基本的图像转换器，它将“图像”更改为位于同一文件中的数组中的不同.jpg <!DOCTYPE html> <html> <body> <img id="image" src="blank_light.jpg" style="width:100px"> <p></p> <button class = "change-imag

我看了一下，寻找我的答案，但发现对于这样一个简单的过程来说，代码太长了。 下面，我的代码显示了一个基本的图像转换器，它将“图像”更改为位于同一文件中的数组中的不同.jpg

<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button class = "change-image">Change Lights</button>
<script>
var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_light.jpg", "red_light.jpg", "blank_light.jpg"]
var buttons = document.getElementsByClassName("change-image")
for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function () {
    document.getElementById("image").src = imageSources[i]
  }
}
</script>
</body>
</html>




换灯
var imageSources=[“green_light.jpg”、“yellow_light.jpg”、“red_and_yellow_light.jpg”、“red_light.jpg”、“blank_light.jpg”]
var buttons=document.getElementsByClassName（“更改图像”）
for（设i=0；i
理论上，因为我已经在HTML中嵌入了脚本，所以它应该像做梦一样工作，但是图像似乎被黄灯卡住了。是否有我错过的重复按钮点击阶段

谢谢。

不需要使用循环。您可以使用
document.getElementsByClassName（“更改图像”）[0]获取对按钮的引用。然后，您可以添加事件列表器，以便在每次单击按钮时触发

每次用户单击时，您都会逐个遍历数组

您可以考虑这样做：


var buttons = document.getElementsByClassName("change-image")[0];
var index = 0;

buttons.addEventListener('click',function() {
    if(index === imageSources.length ) {
        index = 0;
    }
    document.getElementById("image").src = imageSources[index];
    index++;
});


下面是完整的代码，它可以工作。如果您检查
img
元素，您将看到它会更新


<!DOCTYPE html>
<html>
  <body>
    <img id="image" src="blank_light.jpg" style="width:100px">
    <p></p>
    <button class="change-image">Change Lights</button>
    <script>
      var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_light.jpg", "red_light.jpg", "blank_light.jpg"]
      var buttons = document.getElementsByClassName("change-image")[0];
      var index = 0;

      buttons.addEventListener('click', function() {
        if (index === imageSources.length) {
          index = 0;
        }
        document.getElementById("image").src = imageSources[index];
        index++;
      });

    </script>
  </body>
</html>






换灯
var imageSources=[“green_light.jpg”、“yellow_light.jpg”、“red_and_yellow_light.jpg”、“red_light.jpg”、“blank_light.jpg”]
var buttons=document.getElementsByClassName（“更改图像”）[0]；
var指数=0；
按钮。addEventListener（'单击'，函数（）{
如果（索引===imageSources.length）{
指数=0；
}
document.getElementById（“image”）.src=imageSources[index]；
索引++；
});

有趣的实现-）



document.getElementById（“changer”）.addEventListener（“单击”，函数）（）{
var i=document.getElementById（“源”）；
变量图像=[
"http://lorempixel.com/400/200/sports",
"http://lorempixel.com/400/200/animals",
"http://lorempixel.com/400/200/nature"
];
var ord=parseInt（i.dataset.order）；
下一页=功能（上一页）{
返回（prev+1>=images.length？（prev+1）%images.length:prev+1）；
}
document.getElementById（“source”）.src=images[nextImage（ord）]；
i、 dataset.order=ord+1；
})




更改
您只有一个按钮，当您单击它时，您将图像的
src
设置为数组中的第一个图像（即
green\u light.jpg
）。如果您有多个按钮，则此代码是有意义的。但是，由于您希望在每次单击时遍历数组，因此至少需要一个存储当前数组索引的变量。单击该按钮将使变量前进，然后使用该按钮从数组中获取文件名。@Dekel您建议按照Chris所说的为数组索引创建变量，还是创建更多按钮？当然，添加更多的按钮可能会让事情看起来不整洁，但有了JS和HTML的基本知识，我可能会很难建立索引，除非有人把它作为一个答案发布*提示*@ChrisG和你一样，克里斯，你觉得我上面说的话怎么样？@freddie.bumder你到底指的是什么？顺便说一句，如果你将
index++
更改为
index=（index+1）%imageSources.length
我试过使用你的代码，但点击按钮后，图像一点也没有改变，即使尝试了@Chris G'sapproach@freddie.bumder这个代码确实有效。您确定正确引用了这些图像吗？