Actualizar un campo de texto con javascript

salbefe · #1 (**permalink**) 04/11/2007, 06:00

Hola,

Estoy intentanto actualizar un campo de texto (input text field) dinámicamente con javascript pero por alguna razón funciona correctamente en IE pero no funciona bien ni en Firefox ni en Safari.

El script es muy simple; se trata de coger el valor que haya en el campo de texto y añadirle el caracter '2' al final tantas veces como pulsemos el boton.

En Firefox y en Safari me pasa lo siguiente:

Al principio, el campo esta vacio y no tiene valor. Si pulso el botón si que se va actualizando el valor del campo con la cadena '22222...' como tantas veces haya pulsado el botón. Ahora bien, si EDITO ese resultado y añado por ejemplo al final de la cadena que había obtenido cualquier cosa, por ejemplo, '222233' se supone que si ahora pulsase el botón el campo de texto se debería actualizar a '2222332' pero no pasa nada de nada, incluso la consola de error de javascript del firefox no detecta ningún error.

¿Me puede aclarar alguien porque no se actualiza este campo de texto?
Gracias por adelantado

<html>
<head>
<title>Prueba</title>
<script language="JavaScript">

function do_update(objeto){

valorActual = document.getElementById(objeto).value;

valorActual = valorActual+'2';

document.getElementById(objeto).setAttribute("valu e",valorActual);

}

</script>
</head>
<body>
<input type='text' value='' id='p0'>
<input type='button' value='+2' onClick="do_update('p0');">
</body>
</html>

Panino5001 · #2 (**permalink**) 04/11/2007, 06:43

Y tus tags form dónde están?

JavierB · #3 (**permalink**) 04/11/2007, 06:50

Hola salbefe. Bienvenido al foro.

Me parece que Firefox no reconoce setAttribute. Prueba poniendo así la función:

Código:

function do_update(objeto){
 document.getElementById(objeto).value += 2;
}

Saludos,

Panino5001 · #4 (**permalink**) 04/11/2007, 08:03

setAttribute funciona en Firefox. Ahora hago unas pruebas.

JavierB · #5 (**permalink**) 04/11/2007, 08:30

Hola Panino5001

Yo también he estado haciendo pruebas y me he encontrado con algo que no entiendo. Tengo este código:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function pepe() {
  obj = document.getElementById('algo');
  obj.setAttribute('value','texto');
}
</script>
</head>
<body>
<input type="text" id="algo" />
<input type="button" onclick="pepe()" />
</body>
</html>

Si lo ejecutas y pulsas el botón, funciona bien, pero si escribes algo en el campo de texto y luego pulsas el botón, no hace nada

Saludos,

Panino5001 · #6 (**permalink**) 04/11/2007, 08:43

Sip, es raro. Yo hice esta otra, y estoy más que confundido, porque el getAttribute parece tomarlo (a medias, poque sólo toma el número 2), pero setAttribute no lo escribe.

Código PHP:

  <script>
function do_update(objeto){
valorActual=document.getElementById(objeto).getAttribute("value").toString()+'2';
alert(valorActual.toString());
document.getElementById(objeto).setAttribute("value",valorActual);
}
</script>

salbefe · #7 (**permalink**) 04/11/2007, 08:44

Hola,

Gracias por vuestras respuestas. He probado lo que ha comentado JavierB y es lo unico que funciona realmente tanto en Firefox, como en Safari como en IE. La verdad es que no se que pasa con la función setAttribute en Firefox y en Safari.

He estado buscando en google pero no encuentro nada, aunque lo que realmente no entiendo es que setAttribute funciona en unos casos y en otros no.

En el siguiente código, se supone que cuando le das al botón debería de sumar dos al número que hay en el input field. Pues bien, aquí setAttribute funciona, si el input field esta inicialmente vacio y cada vez que le das al botón va sumando dos sin ningún problema.

Pero si después de darle al botón, editas lo que hay en el input field, poniendo otro número y le vuelves a dar, en principio debería de sumar dos al número que hayas puesto; pues bien, ESTO NO FUNCIONA con setAttribute. En cambio si funciona si con la linea que esté descomentada justo debajo de settAttribute.

No tengo ni idea del porque y google no me aclara nada. :(

<html>
<head>
<title>Prueba</title>
<script language="JavaScript">

function do_update(objeto,incremento){

valorActual = parseFloat(document.getElementById(objeto).value);

if(isNaN(valorActual)==true)
{

valorActual = 0;

}

valorActual = parseFloat(valorActual) + incremento;

if(incremento == 0)
{
valorActual = 0;
}

//document.getElementById(objeto).setAttribute("valu e",valorActual); Esta linea funiona pero si editas el resultado después de haber pulsado el botón, después ya no se actualiza
document.getElementById(objeto).value = valorActual;

}

</script>
</head>
<body>
<input type='text' value='' id='p0'>
<input type='button' value='+2' onClick="do_update('p0',2);">
</body>
</html>