[SOLUCIONADO] No funciona mi codigo

icm9 · #1 (**permalink**) 11/09/2014, 12:33

Tengo un bloque <div> que es un rectangulo azul de 50px por 30px, lo que quiero hacer es que mi funcion haga aumentar su width con un setInterval, que quede como una animacion..

escribi esto:

Código:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="newcss.css"/>
    </head>
    <body>
        <div id="bloque" class="bloque" onclick="start()"></div>
        <script>
           var bloque=document.getElementById("bloque"); 
           function move(element){
               element.style.width=(element.style.width+1)+'px';
           }
           function start(){
               var id=setInterval(move(bloque),10);
           }
        </script>
    </body>
</html>

la funcion start corre el setinterval con la funcion move(element) donde element representa el bloque que quiero modificar, pero no funciona. Lo unico que hace es modificar el width a 1 y no hace nada mas...
quiero saber porque

Alexis88 · #2 (**permalink**) 11/09/2014, 13:02

El problema está en que con la forma element.style.width no puedes obtener el valor de su ancho. Para eso, necesitas utilizar el método getComputedStyle.

Código Javascript:

Ver originalvar bloque = document.getElementById("bloque"); 
 
function move(element){
    var width = window.getComputedStyle(element, null).width;
    width = parseInt(width) + 1;
    element.style.width = width + 'px';
}
 
setInterval(function(){
    move(bloque);
}, 10);

Como dicho método devuelve el valor junto con la medida, utilizo a la función parseInt para tomar la parte numérica. La función se ejecutará cada 10 milésimas de segundo y, en cada ejecución, irá incrementando el valor del ancho del elemento en 1.

Y para navegadores anteriores a IE 9, utiliza el método currentStyle.

Saludos

icm9 · #3 (**permalink**) 11/09/2014, 13:20

Código:

           function move(element){
               var width=0;
               function frame(){
                   width++;
                   element.style.width=width+'px';
               }
               var id=setInterval(frame,10);
           }

y porque ahi si funciona? :c

Alexis88 · #4 (**permalink**) 11/09/2014, 13:31

Porque estás asignando un valor, no lo estás tomando. Esa es la diferencia. Y no hace falta declarar una función dentro de otra, puedes trabajar con una función, como en el ejemplo que te indiqué.

Saludos

icm9 · #5 (**permalink**) 11/09/2014, 16:16

muchas Gracias