elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Sigue las noticias más importantes de seguridad informática en el Twitter! de elhacker.NET


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con GetElementById en un boton tipo range.		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] 2 Ir Abajo Respuesta Imprimir
Autor Tema: Problema con GetElementById en un boton tipo range.  (Leído 5,467 veces)
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Problema con GetElementById en un boton tipo range.
« 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
« Última modificación: 4 Junio 2014, 14:00 pm por #!drvy » En línea

ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #1 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.
En línea
Code0x66 - Blog de hacking & programación
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #2 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;
« Última modificación: 4 Junio 2014, 14:00 pm por #!drvy » En línea

ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #3 en: 3 Junio 2014, 23:48 pm »
¿Cóm que no te da números? Ponme exactamente la salida que te da el .value()
En línea
Code0x66 - Blog de hacking & programación
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #4 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.  
En línea
GITHUB 
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #5 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;
« Última modificación: 4 Junio 2014, 14:01 pm por #!drvy » En línea

ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #6 en: 4 Junio 2014, 13:06 pm »
Solo por si acaso: inicializaste las variables? 'a', 'b', 'x' e 'y'
En línea
Code0x66 - Blog de hacking & programación
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #7 en: 4 Junio 2014, 16:14 pm »
Si, lo puedes ver en la explicación de el tema. Está todo el código ahí.
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #8 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
En línea
Ori-chan

Desconectado Desconectado

Mensajes: 257


El rey de los novatos en persona.


Ver Perfil
Re: Problema con GetElementById en un boton tipo range.
« Respuesta #9 en: 4 Junio 2014, 18:04 pm »
Con ese "parseInt" si que me va!! Muchas gracias! :D
En línea

Páginas: [1] 2 Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
out of range fuera de rango
Hardware 		Rinformatic 2 7,456 Último mensaje 6 Abril 2011, 12:51 pm
por el-brujo
Problema cable de video de Tv a grafica imput of range y reinicios inesperados
Hardware 		Anonymous250 2 2,213 Último mensaje 4 Julio 2012, 16:11 pm
por Anonymous250
[Python] duda con range()
Python 		flacc 2 2,366 Último mensaje 25 Diciembre 2012, 15:29 pm
por flacc
Duda con getElementByiD
.NET (C#, VB.NET, ASP) 		NsTeam 3 4,616 Último mensaje 12 Septiembre 2017, 17:09 pm
por Eleкtro
Ayuda. getelementbyid() no encuentra el nodo. « 1 2 »
Desarrollo Web 		Tonics 10 5,607 Último mensaje 2 Julio 2020, 16:31 pm
por Tonics
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines