Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Ori-chan en 3 Junio 2014, 22:33 pm


Título: Problema con GetElementById en un boton tipo range.
Publicado por: Ori-chan en 3 Junio 2014, 22:33 pm
El código es este:
HTML:
Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
  7. <title>My First Canvas Game</title>
  8. </head>
  9.  
  11. <h1>My First Canvas Game</h1>
  12.  
  13. <p><canvas id="canvas" width="900" height="450" style="background:#999">
  14. Canvas not supported by your browser.
  15. </canvas></p>
  16. </br>
  17. <form name="registro">
  18. Ancho del borde del rectángulo: <input type="range" id="ancho_del_cuadro" min="1" max="20" value="1" /><div id="ancho"></div></br>
  19. <script type="application/javascript" src="game.js"></script>
  20. </form>
  21. </body>
  22. </html>


JS:
Código
  1. window.addEventListener('load',init,false);
  2. var canvas=null,ctx=null;
  3. var a=0,b=0,x=0,y=0,ce=1, ar=5;
  4.  
  5. function init(){
  6.     canvas=document.getElementById('canvas');
  7.     x=canvas.height;
  8.     y=canvas.width;
  9.     ctx=canvas.getContext('2d');
  10.     run();
  11. }
  12.  
  13. function run(){
  14.     requestAnimationFrame(run);
  15.     act();
  16.     paint(ctx);
  17. }
  18.  
  19. function act(){
  20.     a+=ce;
  21.     b+=ce;
  22.     x-=ce*2;
  23.     y-=ce*2;
  24.     modificaciones();
  25. }
  26.  
  27. function random(max){
  28.     return Math.floor(Math.random()*max);
  29. }
  30.  
  31. function modificaciones(){
  32.     ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
  33.     ce=ancho_rectangulo;
  34.     document.getElementById('ancho').innerHTML=ce;
  35.  
  36. }
  37.  
  38. function paint(ctx){
  39.     ctx.lineWidth=ce;
  40.     ctx.strokeStyle='rgb('+random(255)+','+random(255)+','+random(255)+')';
  41.     ctx.strokeRect(a,b,y,x);
  42. }
  43.  
  44. window.requestAnimationFrame=(function(){
  45.     return window.requestAnimationFrame || 
  46.         window.webkitRequestAnimationFrame || 
  47.         window.mozRequestAnimationFrame || 
  48.         function(callback){window.setTimeout(callback,17);};
  49. })();




El caso es que si yo cambio el:
Código
  1.     ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
por un:
Código
  1.     ancho_rectangulo = 1;
todo funciona bien, pero cuando pongo el otro es como si el valor de la variable aumentase (y eso que mas abajo inserta la variable en el html y sale un 1).


No se si es que he cogido el valor mal o que, pero me tiene loco.





Un saludo y gracias por leer!!  :D

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: ivancea96 en 3 Junio 2014, 22:41 pm
Cogiendo solo el HTML, y testeando con "javascript:alert(document.getElementById("ancho_del_cuadro").value);", me da el valor bien (1).

¿Qué valor dices que te sale a ti? El que está mal.

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: Ori-chan en 3 Junio 2014, 23:09 pm
No me da números, simplemente la posición el píxeles de los cuadros se va alargando. Y probando y sustituyendo he descubierto que el error reside en esa parte de código que da un valor que no es a la variable.
Si quieres copia y pega el código y sustituye los "ce" por 1 u otros números para comprobarlo.
Código
  1.     a+=ce;
  2.     b+=ce;
  3.     x-=ce*2;
  4.     y-=ce*2;
Código
  1.     ctx.lineWidth=ce;

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: ivancea96 en 3 Junio 2014, 23:48 pm
¿Cóm que no te da números? Ponme exactamente la salida que te da el .value()

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: EFEX en 4 Junio 2014, 00:37 am
O sino..

Código
  1.     function modificaciones(){
  2.        ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
  3.        //ce=ancho_rectangulo;
  4.        document.getElementById('ancho').innerHTML=ancho_rectangulo;
  5.     }
  6.  

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: Ori-chan en 4 Junio 2014, 07:38 am
Cuando le pido el valor de la variable con
Código
  1.     document.getElementById('ancho').innerHTML=ce;
me da el correcto (1 por defecto), pero no es el correcto cuando lo pongo aquí:
Código
  1.     a+=ce;
  2.     b+=ce;
  3.     x-=ce*2;
  4.     y-=ce*2;



Si yo lo escribo así:
Código
  1.     a+=1;
  2.     b+=1;
  3.     x-=1*2;
  4.     y-=1*2;
todo se ejecuta bien (A excepción de que no puedo cambiar el valor)




También, si lo pongo así está mal:
Código
  1.     ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
pero an cambio así va bien:
Código
  1.     ancho_rectangulo = 1;

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: ivancea96 en 4 Junio 2014, 13:06 pm
Solo por si acaso: inicializaste las variables? 'a', 'b', 'x' e 'y'

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: Ori-chan en 4 Junio 2014, 16:14 pm
Si, lo puedes ver en la explicación de el tema. Está todo el código ahí.

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: #!drvy en 4 Junio 2014, 16:57 pm
No entendí el problema.. xD

Código
  1. ancho_rectangulo = parseInt(document.getElementById("ancho_del_cuadro").value);

Me va bien.. o eso se supone..

Saludos

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: Ori-chan en 4 Junio 2014, 18:04 pm
Con ese "parseInt" si que me va!! Muchas gracias! :D

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: #!drvy en 4 Junio 2014, 20:56 pm
Siempre que vayas a tratar valores en campos, usa parseInt() para asegurarte de que estas tratando con un integro =)

Saludos

Título: Re: Problema con GetElementById en un boton tipo range.
Publicado por: JorgeEMX en 7 Junio 2014, 19:38 pm
JA, me dio mucha risa el tema....

En si, casi cualquier valor que venga del DOM es tratado como un string.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines