innerHTMl funciona a veces

josanlopez · #1 (**permalink**) 06/02/2012, 13:48

Buenas,

Llevo ya algún tiempo con un problema con javascript, no he sido capaz de encontrar solución, a ver si alguien me pudiera ayudar.

La situación es:
<input type="text" id="textoPer" onKeyUp="cambiarTexto(this.value,'cajaPer'')"/>
//nota: cajaPer puede ser cajaper, cajaper1, cajaper2 en base a unas condiciones

<div id="pvp">25</div>
<div id="cajaper"></div>
<div id="cajaper1"></div>
<div id="cajaper2"></div>

Mi función cambiar texto modifica el texto de cajaperX por el del input, con un
document.getElementById(cajaperX).innerHTML=texto;

Pero cuando haya algún texto introducido tengo que modificar el precio del producto.

Problema: De los 3 productos que usan esta lógica, 1 funciona perfectamente y los otros 2 no, y mi conclusión es porque no puede detectar si la longitud del texto del input es >0, pero ¿por qué en uno sí y en otro no?

También agradecería si alguien supiera cómo se llama este problema para poder seguir buscando.

Muchas gracias de antemano.

Saludos

nilburcion · #2 (**permalink**) 06/02/2012, 14:19

No se si te has fijado que hay dos comillas en el input:

Código:

<input type="text" id="textoPer" onKeyUp="cambiarTexto(this.value,'cajaPer'')"/>

Me parece que es eso, pero no estoy muy seguro...

josanlopez · #3 (**permalink**) 07/02/2012, 09:07

Gracias por responder, he comprobado lo que me dices, pero ha sido error al quitar código, para no poner aquí todo el contenido que son básicamente las sentencias if que hacen que aparezca cajaPer, cajaPer1, cajaPer2.

Gracias.

emprear · #4 (**permalink**) 07/02/2012, 09:47

No sé bien que es lo que no te funciona
Probá asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function cambiarTexto(texto,cajaperX){
var elTexto =document.getElementById(cajaperX);
var longitud = document.getElementById('textoPer').value;
var elPrecio = document.getElementById('pvp');
 
elTexto.innerHTML = texto;
if(longitud.length > 0){
alert(longitud.length);
elPrecio.innerHTML = "cambio el numero";
}else{
elPrecio.innerHTML = "25";
}
}
//]]>
</script>
</head>
<body>
<form action="#">
<input type="text" id="textoPer" onKeyUp="cambiarTexto(this.value,'cajaPer');"/>
</from>
 
<div id="pvp">25</div>
<div id="cajaPer"></div>
 
</body>
</html>

Saludos

josanlopez · #5 (**permalink**) 08/02/2012, 12:43

Muchas gracias por la respuesta.

He estado probando todo lo que me dices pero no hay forma, de hecho ahora ya ni funciona lo que antes funcionaba.

Señores, estoy en la parra. Resulta que en uno de los casos estaba intentado obtener el contenido de una caja que no existía:

document.getElementById(cajaperX)

donde no existe cajaperX. (ahora tengo que ver cómo comprobar que el id="cajaperX" existe)

Siento las molestias.

Muchísimas gracias.

Saludos