0

tengo un problema y es que quiero encoger una imagen 5px cada vez que pulso un botón pero lo que he conseguido es que pulsando el botón la imagen se reduzca a 5x5 px en vez de 5px cada vez

Este es el código:

function ejercicio2(){
    document.getElementById("resultado").innerHTML='<img src="foto.png" id="foto" style="width:200px; height:200px;"/>'+'<button onclick="encoger()">Boton de la funcion</button>';
    document.getElementById("variable").innerHTML=document.getElementById("foto").style.width;
}
function encoger(){
    var foto=document.getElementById("foto");
    foto.style.width="5px";
    foto.style.height = "5px";
    document.getElementById("variable").innerHTML=document.getElementById("foto").style.width;
}
5
  • Welcome Lorenzo. Please translate your question, you are in Stackoverflow Español... Commented el 29 sept. 2019 a las 14:17
  • Amigo, creo que te confundiste de stack, esta pregunta es en spanglish my friend, es cierto lo que dice @VíctorHugoTirado, deberias traducirla, aparte el código esta en español, pienso que ha sido una pequeña confusión.
    – Layer
    Commented el 30 sept. 2019 a las 11:23
  • sisi es que es la primera vez que publico nada aqui y me dieron referencia de sesta pagina y que estaba en ingles sorry Commented el 30 sept. 2019 a las 20:27
  • Tranquilo camarada @BorjaLorenzo, es verdad que hay diferentes sitios de stackoverflow, algunos en ingles otros en español, tenlo en cuenta para formular la siguiente pregunta, un gusto haber podido ayudarte ;3
    – Layer
    Commented el 30 sept. 2019 a las 20:35
  • Por favor, para poder ayudar a las personas que tengan el mismo problema que vos, sería bueno que traduzca la pregunta... Los ayudará a buscarlo de forma más fácil... Commented el 1 oct. 2019 a las 14:47

1 respuesta 1

2

Antes de nada, considero que no deberías usar innerHTML para actualizar un elemento html, y mucho menos asignarle un template desde JS, si lo haces por practicar o probar esta bien, esta perfecto, pero si es un proyecto mas bien serio o quieres usar buenas practicas, el innerHTML solo lo recomiendo usar cuando deseas rapidamente AGREGAR contenido HTML dentro de una etiqueta existente o cambiar de tal manera el contenido html del elemento siempre y cuando este sea muy diferente al original (que sea algo completamente distinto a lo que tenias), cosa que no es tu caso, aparte recuerda que no hay necesidad de actualizar los elementos HTML por tu cuenta, ya que exceptuando la etiqueta template, estos se actualizan solos, por otro lado he aqui un ejemplo:

document.getElementById("resultado").innerHTML='<img src="foto.png" id="foto" style="width:200px; height:200px;"/>'+'<button onclick="encoger()">Boton de la funcion</button>';

Lo que estas haciendo realmente ahi es siempre asignandole un valor constante a ese elemento, y lo que intuyo yo es que ese template lo estas usando con otro boton para regresar la imagen al tamaño original, por lo que podrias simplemente cambiarlo por:

const elemento = document.getElementById("resultado");
elemento.style.width = "200px";
elemento.style.height = "200px";

Y para hacer esto mas eficiente aun y escribir menos lineas de codigo podrias en vez de declarar la variable elemento dentro de la funcion ejercicio2, declararla globalmente, de esta manera:

//Variables globales declaradas fuera de todas las funciones y arriba del todo:
const ejercicio2Resultado = document.getElementById("resultado");
const variable = document.getElementById("variable");
const foto = document.getElementById("foto");

function ejercicio2(){

    //Uso de las variables declaradas anteriormente
    ejercicio2Resultado.style.width = "200px";
    ejercicio2Resultado.style.height = "200px";

    //Para el caso de la constante llamada variable, deberias hacer una cosa u la otra
    //Dependiendo si el elemento es un input o si el elemento no es un input, si el
    //Elemento es un input, asignale a la propiedad value de esta manera:

    variable.value = getComputedStyle(foto, null).getPropertyValue('width');

    //En caso de que el elemento html guardado en la constante llamada variable, no sea
    //de tipo input, deberias usar textContent:

    variable.textContent =  getComputedStyle(foto, null).getPropertyValue('width');

    //Recuerda usar la que mas te convenga y borrar la otra ya que si colocas las dos
    //para el caso de la constante llamada variable posiblemente obtengas un error.

}

Ahora, como haz podido ver, hay algo que ha cambiado en tu código, y es que en vez de por ejemplo hacer algo como:

variable.value = foto.style.width;

Se hace algo como:

variable.value = getComputedStyle(foto, null).getPropertyValue('width');

En tu caso no es necesario realizar este proceso, pero te comparto esta forma por si la necesitas despues, en tu caso cuando accedes a la propiedad style directamente de un elemento y dentro de ella le asignas algun estilo al elemento desde el JS, la propiedad existira y sera accesible por medio de javascript simplemente mediante algo como:

elemento.style.atributoCSS;

Pero dado el caso de que nunca asignes un valor directamente desde javascript y necesites los valores que pusistes en el css, la propiedad style en el atributo css que te interesa estara indefinido, por esta razon te comparto de una vez las funciones getComputedStyle y getPropertyValue, que vienen de la mano las dos, de esta manera obtendras de manera correcta las propiedades css alojadas o aplicadas directamente desde un archivo css.

por otro lado la funcion encoger es muy sencilla de manejar, simplemente debes primero obtener el ancho y alto actual de la imagen y luego a cada uno de esos valores restarle 5px:

function encoger(){

   foto.style.width = parseInt(foto.style.width) - 5 + "px";
   foto.style.height = parseInt(foto.style.height) - 5 + "px";
   variable.textContent = foto.style.width;

   //Recuerda que en caso de que tu elemento sea tipo input, deberias usar value en vez
   //De textContent:
   //
   //variable.value = foto.style.width;
   //
   //Y recuerda tambien que si las propiedades que necesitas vienen directamente desde un
   //Archivo css, deberas utilizar las funciones getComputedStyle y getPropertyValue
   //Una tras otra en vez de la propiedad style del elemento para obtener el valor
   //Real de un css aplicado desde una hoja de estilos:
   //
   //foto.style.width = parseInt(getComputedStyle(foto, null).getPropertyValue('width')) - 5 + "px";

}
1
  • MUCHAS GRACIAS!!! Dios no sabes como estoy llevaba como 3 dias sin conseguir nada muchas gracias de verdad ^^ Commented el 30 sept. 2019 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.