如何在JavaScript中使用同一个按钮执行不同的操作？

Question

如何在JavaScript中使用同一个按钮执行不同的操作？

3

我需要一个按钮，点击后会显示特定的图片。但是当再次点击时，需要显示不同的图片。所展示的图像以我想要展示的顺序存储在数组中。我已经使用了一个函数，在按钮点击时将一个图片更改为下一个图片，但是当我尝试更改为第三张图片时，它跳过了第二张图片。我应该如何做到这一点？这是我的代码:

<img id="red" src="traffic-light-red.jpg">

<button onclick="myFunction()">Click me</button>
<p id="change"></p>
<script>

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]

var image = document.getElementById("red")

function myFunction() {
    document.getElementById("change");
    image.src = lights[1]
}

</script>

- Kelvin

4个回答

1

可以尝试以下代码来执行您想要的操作。在函数外部保留一个变量，称之为“counter”。

点击按钮时，获取lights[counter]并将其设置为img的源。然后将计数器增加1。

当它达到数组的长度时，将计数器重新设置为“0”。这样它就可以再次从第一张图片开始了。

var counter = 0;

var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]

var image = document.getElementById("red");

function myFunction()
{
  image.src = lights[counter];
  console.log(image.src);
  counter += 1;
  
  if(counter == lights.length)
    {
      counter = 0;
      }
}

<img id="red" src="traffic-light-red.jpg">

<button onclick="myFunction()">Click me</button>
<p id="change"></p>

- Shrabanee

1

使用此代码：

<button id="" onclick="lights()">Click me</button>
<img id="red" src="add file name">

<script>
function lights(){
    var sequence=[your files];
    var image = document.getElementById('red');
    var i = 0;
    intervalHandler = setInterval(function(){
    var colour=sequence[i]
    image.src = colour;
    i++;
    if(i>=sequence.length) {
        clearInterval(intervalHandler);
    }
    },1000)
    }
</script>

- Out North

0

尝试这个：使用隐藏字段来存储当前图像，并在每次单击时获取递增值。

<input type="hidden" name="imageindex" id="imageindex" value="0">

在你的函数“myFunction（）”中创建逻辑以获取并增加imageindex值。如果imageindex的值大于图像数组，则重置为0。请参考以下Javascript代码。

var currentindex = $("#imageindex").val();
var totalimages = lights.length;

if( currentindex > totalimages ) {
    currentindex = 0;
}
image.src = lights[currentindex];

//New Index
var newindex = currentindex + 1;

//Set new index value
$("#imageindex").val(newindex);

- Ajay Gokhale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phil · Accepted Answer

从你的代码中可以看出，你总是将索引设置为1(

image.src = lights[1])，这会在你点击按钮时始终加载第二张图片。你应该将所加载的图像的当前索引分配给一个变量并递增它。
【编辑】
在我下面的答案中，根据最初设置为零的索引选择图像，然后递增索引。我还检查索引的值，如果它等于lights数组中的最后一个元素，则将其重置为零，这将使您返回到起始图像。
如下：
var lights= ["traffic-light-red.jpg", "traffic-light-amber.jpg", "traffic-light-green.jpg", "traffic-light-amber.jpg"]
var index = 0;
var image = document.getElementById("red")

function myFunction() {
    document.getElementById("change");

    image.src = lights[index]
    index++;
    if(index >= lights.length) {
        index = 0;
    } 
}

请注意数组和数组索引。下面的数组将具有长度为5，但它的第5个项目将具有索引4。这是因为length属性返回项数，但Javascript（像大多数编程语言一样）从零开始计数。
这就是我在上面的答案中检查是否大于或等于 if(index >= lights.length)，如果索引等于4，则它将寻找数组中的第五个元素，但该元素不存在。（实际上可能不需要大于号，但我认为包括它是好的做法）。
var arr = ["item1","item2","item3","item4","item5"];
console.log(arr[0]) // item1 - First element, index 0
console.log(arr[4] // item5 - Fifth element, index 4