1

Estoy empezando en javascript y quería realizar unas practicas usando animaciones. La consulta que tengo es que quiero enviar un parametro usando el método requestAnimationFrame(). Lo que quiero es enviar la variable primeraCaja por requestAnimationFrame() usando el método naceElemento(), ya intente de varias formas pero me da error. Si tienen recomendaciones ó algún consejo les agradeceria mucho.

var boton = document.getElementById('boton'); 
var dato;
var txtBox = document.getElementById('textBox');
var padre = document.getElementById('Padre');
var alto = 0, ancho = 0;

boton.addEventListener('click', function(){ 
    dato = txtBox.value;
    var primeraCaja = document.createElement('div');
    var text = document.createTextNode(dato); 
    primeraCaja.appendChild(text);
    padre.appendChild(primeraCaja);
    primeraCaja.setAttribute('class', 'elementoInicial' );  
    requestAnimationFrame(naceElemento);


});



function naceElemento(){

    if(alto<100){
        alto = alto + 2;
        ancho = ancho + 2;
        primeraCaja.style.width = alto + 'px';
        primeraCaja.style.height = ancho + 'px';
        console.log(alto);
        requestAnimationFrame(naceElemento);
    }else{
        alto = 0;
        ancho = 0;
        cancelAnimationFrame(requestAnimationFrame(naceElemento));
    }


}
<html lang="es">
   <head>
       <meta charset="UTF-8">
       <title>Prueba</title>
       <link rel="stylesheet" href="estilos.css">
   </head>
   <body>
       <div id='Padre'>

       </div>
       <form>
           <input id="textBox"class="input" type="number">
           <input id="boton"class="sub" type="button" value="Enviar">
       </form>
       <script src="main.js">
       </script>
   </body>
</html>

1 respuesta 1

0

Quizás debas hacerlo de esta forma

var primeraCaja; // pre-definimos la variable 'primeraCaja'
var boton = document.getElementById('boton'); 
var dato;
var txtBox = document.getElementById('textBox');
var padre = document.getElementById('Padre');
var alto = 0, ancho = 0;

boton.addEventListener('click', function(){ 
dato = txtBox.value;
primeraCaja = document.createElement('div'); // le asignamos un valor para así
// poderlo pasar a la función 'naceElemento'
var text = document.createTextNode(dato); 
primeraCaja.appendChild(text);
padre.appendChild(primeraCaja);
primeraCaja.setAttribute('class', 'elementoInicial' );  
requestAnimationFrame(naceElemento);


});



function naceElemento(){

if(alto<100){
    alto = alto + 2;
    ancho = ancho + 2;
    primeraCaja.style.width = alto + 'px';
    primeraCaja.style.height = ancho + 'px';
    console.log(alto);
    requestAnimationFrame(naceElemento);
}else{
    alto = 0;
    ancho = 0;
    cancelAnimationFrame(requestAnimationFrame(naceElemento));
}


}
<html lang="es">
   <head>
   <meta charset="UTF-8">
   <title>Prueba</title>
   <link rel="stylesheet" href="estilos.css">
   </head>
   <body>
   <div id='Padre'>

   </div>
   <form>
       <input id="textBox"class="input" type="number">
       <input id="boton" class="sub" type="button" value="Enviar">
   </form>
   <script src="main.js">
   </script>
   </body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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