Problema con GetElementById en un boton tipo range.

Ori-chan · 3 Junio 2014, 22:33 PM

El código es este:
HTML:

Código (html4strict) [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
<title>My First Canvas Game</title>
</head>

<body>
<h1>My First Canvas Game</h1>

<p><canvas id="canvas" width="900" height="450" style="background:#999">
Canvas not supported by your browser.
</canvas></p>
</br>
<form name="registro">
Ancho del borde del rectángulo: <input type="range" id="ancho_del_cuadro" min="1" max="20" value="1" /><div id="ancho"></div></br>
<script type="application/javascript" src="game.js"></script>
</form>
</body>
</html>

JS:

Código (javascript) [Seleccionar]

window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var a=0,b=0,x=0,y=0,ce=1, ar=5;

function init(){
    canvas=document.getElementById('canvas');
    x=canvas.height;
    y=canvas.width;
    ctx=canvas.getContext('2d');
    run();
}

function run(){
    requestAnimationFrame(run);
    act();
    paint(ctx);
}

function act(){
    a+=ce;
    b+=ce;
    x-=ce*2;
    y-=ce*2;
    modificaciones();
}

function random(max){
    return Math.floor(Math.random()*max);
}

function modificaciones(){
    ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
    ce=ancho_rectangulo;
    document.getElementById('ancho').innerHTML=ce;

}

function paint(ctx){
    ctx.lineWidth=ce;
    ctx.strokeStyle='rgb('+random(255)+','+random(255)+','+random(255)+')';
    ctx.strokeRect(a,b,y,x);
}

window.requestAnimationFrame=(function(){
    return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function(callback){window.setTimeout(callback,17);};
})();

El caso es que si yo cambio el:

Código (javascript) [Seleccionar]

ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
por un:

Código (javascript) [Seleccionar]

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!!

ivancea96 · 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.

Ori-chan · 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 (javascript) [Seleccionar]

    a+=ce;
    b+=ce;
    x-=ce*2;
    y-=ce*2;

Código (javascript) [Seleccionar]

ctx.lineWidth=ce;

ivancea96 · 3 Junio 2014, 23:48 PM

¿Cóm que no te da números? Ponme exactamente la salida que te da el .value()

EFEX · 4 Junio 2014, 00:37 AM

O sino..

Código (javascript) [Seleccionar]


    function modificaciones(){
       ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
       //ce=ancho_rectangulo;
       document.getElementById('ancho').innerHTML=ancho_rectangulo;
    }

Ori-chan · 4 Junio 2014, 07:38 AM

Cuando le pido el valor de la variable con

Código (javascript) [Seleccionar]

document.getElementById('ancho').innerHTML=ce;
me da el correcto (1 por defecto), pero no es el correcto cuando lo pongo aquí:

Código (javascript) [Seleccionar]

    a+=ce;
    b+=ce;
    x-=ce*2;
    y-=ce*2;

Si yo lo escribo así:

Código (javascript) [Seleccionar]

    a+=1;
    b+=1;
    x-=1*2;
    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 (javascript) [Seleccionar]

ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
pero an cambio así va bien:

Código (javascript) [Seleccionar]

ancho_rectangulo = 1;

ivancea96 · 4 Junio 2014, 13:06 PM

Solo por si acaso: inicializaste las variables? 'a', 'b', 'x' e 'y'

Ori-chan · 4 Junio 2014, 16:14 PM

Si, lo puedes ver en la explicación de el tema. Está todo el código ahí.

#!drvy · 4 Junio 2014, 16:57 PM

No entendí el problema.. xD

Código (javascript) [Seleccionar]

ancho_rectangulo = parseInt(document.getElementById("ancho_del_cuadro").value);

Me va bien.. o eso se supone..

Saludos

Ori-chan · 4 Junio 2014, 18:04 PM

Con ese "parseInt" si que me va!! Muchas gracias!