Aumento progresivo de movimiento

[Ex_shadow]

Hola tengo un Carrousel en el que , al apretar la flecha derecha, se mueve a 200px hacia la derecha, se supone que tendria que sumarse otros 200px más a cada movimiento osea:

Flecha derecha accionada - Carrousel se mueve - 200px derecha

Flecha derecha accionada - Carrousel se mueve - 400px derecha

Flecha derecha accionada - Carrousel se mueve - 600px derecha


Pero en vez de hacer eso solo se mueve una vez.... les paso el script...

Código Javascript:

if(evento.keyCode == 39){       
            
    document.getElementById(Prefijo+Foco).removeAttribute('class');
            
            Foco++;
            
    document.getElementById(Prefijo+Foco).setAttribute('class','Select');
            
    document.querySelector(Carrousel).style.left += 200; 
}
 

Osea no entiendo que esta mal, se supone que cada vez que se acciona el left se tiene que sumar de a 200.

200, 400, 600 , etc...

Cualquier aporte sera bienvenido y agradecido, tambien sumo karma al que me sepa dar una explicacion o me responda ... :)

[patkoala]

El problema está aquí:

Código Javascript:

document.querySelector(Carrousel).style.left += 200;
 

Esto devuelve algo como "300px".
Es una cadena de texto, y no un número entero, así que no puedes sumarle directamente el valor.
Sería así:

Código Javascript:

document.querySelector(Carrousel).style.left = parseInt(document.querySelector(Carrousel).style.left.substr("px","")) + 200 + "px";
 

[Ex_shadow]

Gracias, igual ya lo resolvi, necesitaba multiplicar el tamaño por el numero de foco... era para un carrousel que hice a puro javascript...

manejado solo por las teclas, ahora le voy a agregar buttons