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

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  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,369 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">
  3. <meta charset="UTF-8" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5. <!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
  6. <title>My First Canvas Game</title>
  7. </head>
  8.  
  9. <h1>My First Canvas Game</h1>
  10.  
  11. <p><canvas id="canvas" width="900" height="450" style="background:#999">
  12. Canvas not supported by your browser.
  13. </canvas></p>
  14. </br>
  15. <form name="registro">
  16. Ancho del borde del rectángulo: <input type="range" id="ancho_del_cuadro" min="1" max="20" value="1" /><div id="ancho"></div></br>
  17. <script type="application/javascript" src="game.js"></script>
  18. </form>
  19. </body>
  20. </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

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

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

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

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,410 Ú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,182 Último mensaje 4 Julio 2012, 16:11 pm
por Anonymous250
[Python] duda con range()
Scripting
flacc 2 2,307 Último mensaje 25 Diciembre 2012, 15:29 pm
por flacc
Duda con getElementByiD
.NET (C#, VB.NET, ASP)
NsTeam 3 4,599 Último mensaje 12 Septiembre 2017, 17:09 pm
por Eleкtro
Ayuda. getelementbyid() no encuentra el nodo. « 1 2 »
Desarrollo Web
Tonics 10 5,499 Último mensaje 2 Julio 2020, 16:31 pm
por Tonics
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines