La función javascript necesita hacer doble clic para funcionar

Tengo estas dos funciones de JavaScript que, por alguna razón, tengo que hacer clic en el botón dos veces para que funcionen. ¿algunas ideas?

var shirts = new Array("shirtpink.png","shirtred.png", "shirtblue.png", "shirtyellow.png","shirt.png");

var index = 0;
function changecolor(){
    if (index > 4){
        index = 0;
    }
    var shirtpick = document.getElementById("shirt");
    shirtpick.setAttribute('src',shirts[index]);
    index++;
}

otra función:

function changecolorback(){
    index--;
    i++;
    if (index < 0){
        index = 4;
    }
    var shirtback = document.getElementById("shirt");
    shirtback.setAttribute('src',shirts[index]);
}

preguntado el 16 de mayo de 11 a las 19:05

Proporcione un ejemplo HTML de cómo se llaman estas funciones. -

¿Puedes pegar el código html también? -

bien, entonces podrías arreglar esto o simplemente podrías usar jQuery. -

"Solo usa jQuery" me cansa mucho. -

@pixelbobby: doxdesk.com/img/updates/20091116-so-large.gif, lo siento, pero ¿cargar jquery solo para un evento doble? -

2 Respuestas

var shirts = ["shirtpink.png","shirtred.png", "shirtblue.png", "shirtyellow.png","shirt.png"],
    index = 0;

function changecolor(amount){
   index = (index + amount) % shirts.length;
   document.getElementById("shirt").setAttribute('src',shirts[index]);
}

La razón fueron sus incrementos: estaba incrementando después de que se ejecutó su código (en una función, pero no en la otra, por lo que su changecolorback() debería haberse comportado bien).

Tu tambien tenias i++ que parecían redundantes y algunas variables que solo se usaron una vez.

Acorté tu código (drásticamente) para que puedas acceder a estos comentarios sin tener que desplazarte demasiado. En lugar de llamar changecolorback(), ahora puedes simplemente hacer changecolor(-1), y el método de reenvío es changecolor(1).

Otra ventaja es que esto le permitirá saltar en más de uno, o una cantidad aleatoria, lo que podría (o no) ser útil.

EDIT:

JS implementa módulos como Java, por lo que los negativos aún mantienen su signo. Es decir (-1)%5 === -1

Puede superar esto con bastante facilidad cambiando (más elegante, aunque no del todo equivalente):

index = Math.abs(index + amount) % shirts.length;

or

index = ((index + amount) % shirts.length + shirts.length ) % shirts.length;

contestado el 16 de mayo de 11 a las 23:05

el changecolor (1) funciona bien excepto por el hecho de que omite el primer elemento pero lo busca la segunda vez que pasa por la matriz. y el changecolor (-1) me da un error de matriz indefinido. Lo arreglé agregando esta línea if (index == -1) {index = 4;} pero tengo que hacer clic dos veces nuevamente - user541597

@user, con mi actualización ya no debería haber una matriz de error indefinida. Si omite el primer elemento, establezca el valor inicial en -1. Si todo esto aún no es suficiente, entonces el problema está en otra parte. - davin

Intente incrementar / decrementar el índice al comienzo de ambas funciones. Además, tiene 5 elementos, no 4 en su matriz. Probablemente deberías usar shirts.length para evitar esto.

contestado el 16 de mayo de 11 a las 23:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.