Estoy tratando de hacer que esta imagen se mueva 16 píxeles con cada clic, pero no se mueve. He intentado esto:
Pero eso solo lo mueve una vez. Así que probé algo diferente que encontré en línea.
Aquí está mi código:
HTML:
document.getElementById('player').style.left += "-16px"; function left() { var left = parseInt(player.style.left); player.style.left = (left +16) + "px"; } <img id="player" src="characters/prisoner-down.png"></img> <img id="leftbtn" src="icons/left.png" onclick="left();"></img>Editar: si es útil saberlo, habrá tres botones más para las otras direcciones y la imagen que quiero mover está en otro DIV de la imagen que la mueve. En mi editor dice que el símbolo ` no es válido, así que me gustaría evitarlo.
Puede crear una función que obtenga la dirección de la traducción y la cantidad de píxeles para incrementar, luego devuelva una función que establezca el estilo.transformar del elemento en el que se hizo clic, usando un cierre puede actualizar la cantidad de píxeles para traducir, intente esto:
function transform(side, n) { let translatePixels = 0; if (side == 'right') { return function(e) { translatePixels += n; e.target.style.transform = `translate(${translatePixels}px)`; } } if (side == 'left') { return function(e) { translatePixels -= n; e.target.style.transform = `translate(${translatePixels}px)`; } } } const translateRight = transform('right', 16); const translateLeft = transform('left', 16); <img onclick="translateRight(event);" src="https://images.rappi.com.ar/products/2311265-1622567743906.png?d=200x200&e=webp"></img> <img onclick="translateLeft(event);" src="https://cdn.domestika.org/c_fill,dpr_auto,f_auto,h_256,pg_1,t_base_params,w_256/v1499705651/avatars/000/536/178/536178-original.jpg?1499705651" style="right: 0; position:absolute"></img>Otorgue la propiedad de position al img que desea mover.
position: relative; , position: absolute; etc.
Al colocarlos, puede usar las propiedades top , left , right y top .
no use position: static; en esa propiedad img causa anterior no tiene efecto en el elemento estático.
document.getElementById('player').style.left = "-16px"; function left() { let left = parseInt(player.style.left); player.style.left = `${parseInt(left+16)}px`; } img{ /*important for using left, right, top and bottom properties*/ position: relative; } <img id="player" src="https://i.postimg.cc/44pXvSwD/pngwing-com.png"></img> <img id="leftbtn" src="https://i.postimg.cc/FRkMDYvr/Pngtree-right-arrow-flat-multi-color-3777297.png" onclick="left();"></img>