Ayuda con button onClick y javascript

[InfestedART]

en realidad no se si esto va aqui o en PHP

aqui va la duda:

tengo el siguiente codigo:

Código PHP:

  <?  
if (!$grados) {$grados=45; } 
?> 
<input type=text name='grados' id='grados' <? echo "value='$grados'"; ?> size=5>  
<button name=menos onClick="fmenos('grados', 1)">-</button> 
<button name=mas   onClick="fmas('grados', 1)">+</button>  

esto genera un campo de texto llamado GRADOS y a continuacion del campo, dos botones [+] [-] que tienen que incrementar o disminuir en 1 el valor que hay en el campo GRADOS

esto se logra con el siguiente codigo en javascript

Código:

<script language="JavaScript" type="text/javascript"> 

function fmas(inputName, vnum)
	{
	var hola = vnum;
	var numero = parseFloat(document.getElementById(inputName).value);
	
	var resultado = numero + hola; 
	resultado=Math.round(resultado*10)/10;
	document.getElementById(inputName).value = resultado; 
	return false;
	}
	
function fmenos(inputName, vnum)
	{
	var hola = vnum;
	var numero = parseFloat(document.getElementById(inputName).value);
	if (numero > 0)
		{	
		var resultado = numero - hola; 
		resultado=Math.round(resultado*10)/10;
		document.getElementById(inputName).value = resultado; 
		}
	return false;
	}
		
</script>

hasta aqui funciona correctamente,

sin embargo si GRADOS es igual a 15 por ejemplo y el usuario tiene que llegar hasta 60, tendria que darle 45 clics al boton [+], entonces

¿hay alguna forma en javascript para poder mantener apretado el boton [+] para asi llegar a numeros altos?

[hschimpf]

puedes usar onmousedown y onmouseup, habilitando una bandera en onmousedown y deshabilitandola en up.. aparte una funcion con settimeout() para que se llame a si misma.. en la funcion aumentas o disminuyes el valor.. quedaria algo asi:

Código HTML:

<INPUT type="text" name="grados" id="grados" value="<?php echo $grados; ?>" size="5" />
<INPUT type="button" name="mas" onmousedown="javascript:bandera='mas';" onmouseup="javascript:bandera='false';" value="MAS" />
<INPUT type="button" name="menos" onmousedown="javascript:bandera='menos';" onmouseup="javascript:bandera='false';" value="MENOS" /> 

Código JAVASCRIPT:

function modificar() {
   /* tomas el valor del input grados */
   /* preguntas si la bandera esta en mas agregar 1, si esta en menos disminuis uno */
   document.getElementById('grados').value = nuevoValor
   /* volves a llamar a la funcion (podes variar el tiempo para que aumente mas rapido) */
   window.setTimeout("modificar()",250);
}
 

suert!

[InfestedART]

Bueno, voy a pecar de ignorante...

1. ¿en que momento se invoca a la funcion modificar por primera vez?

2. ¿como puedo verificar el valor de la bandera?

[InfestedART]

bueno...

ya pude hacer que funcionara modificando el codigo de la siguiente manera:

Código:

function modificar(inputName, vnum)
{
	var hola = vnum;
	var numero = parseFloat(document.getElementById(inputName).value);

 	if (bandera == "mas")
		{
		var resultado = numero + hola; 
		resultado=Math.round(resultado*100)/100;
		document.getElementById(inputName).value = resultado; 
		}
	if (bandera == "menos" && numero > 0)
		{
		var resultado = numero - hola; 
		resultado=Math.round(resultado*100)/100;
		document.getElementById(inputName).value = resultado; 
		}
 /* volves a llamar a la funcion (podes variar el tiempo para que aumente mas rapido) */
 window.setTimeout("modificar(inputName, hola)",250);
}

pero todavia va aumentando de 1 en 1...
alguna idea de como puedo solucionar esto??

[hschimpf]

Iniciado por InfestedART

pero todavia va aumentando de 1 en 1...
alguna idea de como puedo solucionar esto??

a ver si te entendi.. vos queres que cuanto mas tiempo quede presionado el boton aumente de a 5, luego de a 10, etc..? algo asi es lo que necesitas..?

podrias tener una variable mas que sea el nivel de aumento, y cada 10 veces que se sume el valor dentro de la funcion aumentas el valor de esta otra variable en 5.. y una vez que se ejecute onmouseup reseteas esta variable a 1..

[InfestedART]

no, no
necesito que vaya incrementando de 1 en 1, pero me exprese mal

cuando se presiona el boton del mouse sobre el boton [+], el valor del campo GRADOS aumenta en uno y luego no pasa nada mas. para volver a incrementar se debe soltar el mouse y volver a hacer clic.
lo que quiero que pase es que mientras mantengas presionado el boton del mouse, vaya incrementado rapidamente (pero de uno en uno) hasta que el usuario sulete el btoon del mouse

[InfestedART]

Bueno, problema casi solucionado.
Pude lograr hacer el incremento con este codigo, sin embargo el onMouseUp no funciona y el incremento se detiene depues de 3000 incrementos:

Código:

<script language="JavaScript" type="text/javascript">

var gIsMouseDown = false;
 
function setMouseDown(inputName, vnum)
	{
	var yipee = inputName;
	var hola  = vnum; 
	gIsMouseDown = true;
	doMouseDown(yipee, hola);
	}
	
function doMouseDown(inputName, vnum)
	{
	var yipee = inputName;
	var hola  = vnum; 
	if (gIsMouseDown == true)
		{
		document.getElementById(inputName).value = parseInt(document.getElementById(inputName).value) + vnum;
		setTimeout(doMouseDown(yipee, hola), 250);
		}
	}
	
function setMouseUp()
{
gIsMouseDown = false;
}
</script>

[InfestedART]

Bueno, problema resuelto.
aqui les pongo el codigo ganador

Código:

<script type="text/javascript">
var c=0
var t

function timedCountMas(inputName, vnum)
{
hola = inputName;
x = vnum;
document.getElementById(inputName).value=c;
c=c+x;
c=Math.round(c*100)/100;
t=setTimeout("timedCountMas(hola, x)", 66);
}

function timedCountMenos(inputName, vnum)
{
hola = inputName;
x = vnum;
document.getElementById(inputName).value=c;
if (c>0) 
	{ c=c-x;
	  c=Math.round(c*100)/100;
	  t=setTimeout("timedCountMenos(hola, x)", 66); }
}

function stopCount()
{
clearTimeout(t);
}
</script>

<html>
<body>
.
.
<input name='grados' type=text id='grados' value=0 size="5"> 
<input type="button" value="-" onMouseDown=" timedCountMenos('grados', 1)" onMouseUp="stopCount()" onMouseOut="stopCount()"/>
<input type="button" value="+" onMouseDown=" timedCountMas('grados', 1)" onMouseUp="stopCount()" onMouseOut="stopCount()"/>
.
.
</body>
</html

gracias a hschimpf por la ayuda