Necesito un botón al hacer clic que muestra una imagen específica. Pero cuando se vuelve a hacer clic, debe mostrar una imagen diferente. Las imágenes que se muestran se almacenan en una matriz en una secuencia en la que quiero que se muestren. He utilizado una función para cambiar una imagen a la siguiente al hacer clic en el botón, pero cuando intento cambiar a la tercera imagen se salta la segunda. uno. ¿Cómo haría esto? Este es mi código hasta ahora:

<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>
3
Kelvin 10 may. 2016 a las 13:46

4 respuestas

La mejor respuesta

Puede probar el siguiente código para realizar la acción que desee. Mantenga una variable que diga "contador" fuera de la función.

Al hacer clic en el botón, obtener luces [contador] y establecer es como fuente de la img. Luego aumenta el contador en 1.

Cuando alcanza la longitud de la matriz, vuelva a hacer el contador '0'. Para que pueda comenzar desde la primera imagen nuevamente.

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>
1
Shrabanee 10 may. 2016 a las 10:59

Pruebe esto: use un campo oculto para almacenar la imagen actual y obtener un valor de incremento en cada clic

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

En su función "myFunction ()" cree lógica para obtener e incrementar el valor del índice de imagen. Si el valor del índice de imagen es mayor que su matriz de imágenes, restablezca a 0. Obtenga la referencia del siguiente código 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);
0
Ajay Gokhale 10 may. 2016 a las 10:57

Utilizar esto:

<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>
1
Out North 10 may. 2016 a las 11:11

Según su código anterior, parece que siempre está configurando el índice en 1 (image.src = lights[1]) que siempre cargará la segunda imagen cuando haga clic en el botón. Debe asignar el índice actual de la imagen cargada a una variable e incrementar esto.

[editado] En mi respuesta a continuación, selecciono la imagen basada en el índice que inicialmente se establece en cero para la primera imagen, y luego incrementa el índice. También estoy verificando el valor del índice, si es igual al último elemento en la matriz de luces, entonces lo restablezco a cero, lo que lo devolverá a la imagen inicial.

Como sigue:

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

También tenga en cuenta las matrices y el índice de la matriz. La matriz a continuación tendrá una longitud de 5, pero su quinto elemento tendrá un índice de 4. Esto se debe a que la propiedad de longitud devolverá el número de elementos, pero JavaScript (como la mayoría de los lenguajes de programación) comienza a contar desde cero.

Esta es la razón por la que estoy buscando mayor o igual que en mi respuesta anterior if(index >= lights.length), si el índice es igual a 4, buscará el quinto elemento en la matriz, que no existe. (Probablemente no necesito el mayor que tbh, pero creo que es una buena práctica incluirlo).

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
3
Phil 10 may. 2016 a las 11:25