Hola, estoy tratando de crear funciones que me sirvan sin importar el id del elemento por ahora estoy comenzando a trabajar con una que despliega divs, en la versión que hice primero con paso de argumentos, lo he logrado, son independientes y no me generan problemas, bueno algunos que he sabido solucionar. Pero el problema viene cuando intento hacerlo con controladores de eventos semánticos.
Todo funciona bien, cojo los valores que antes se me pasaba por argumento, jalandolos de los atributos de los elementos de lista con DOM. Pero cuando uso el settimeout es que tengo problemas, puesto que no me reconoce el valor de la variable que uso para establecer la id, bueno, no me explico bien creo, asi que dejo el código para que lo vean y me digan en que fallo.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pruebas</title>
<script src="js/lib.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lib.css" type="text/css" />
<script type="text/javascript">
window.onload = function(){
var listado = document.getElementById('lista').getElementsByTagName('li');
var tamer = this.titlae;
tamara = this.value;
for(var i=0; i<listado.length; i++) {
listado[i].onclick = despliegasema;
}
}
</script>
</head>
<body>
<div id="container">
<div id="lista">
<ul>
<li onClick="javascript:esconder();">esconder elementos de lista</li>
<li id="uno" title="desplegableuno" value="150" >despliega el primero</li>
<li title="desplegabledos" value="140" >despliega el segundo</li>
<li title="desplegabletres" value="160" >despliega el tercero</li>
<li title="desplegablecuatro" value="250" >despliega el cuarto</li>
<li title="desplegablecinco" value="100" >despliega el quinto</li>
<li title="desplegableseis" value="200" >despliega el sexto</li>
</ul>
</div>
<div id="listo">
<ul>
<li>no me borro</li>
<li>no me borro</li>
<li>no me borro</li>
</ul>
</div>
<div id="desplegableuno" >
<p>uno</p>
</div>
<div id="desplegabledos" >
<p>dos</p>
</div>
<div id="desplegabletres" >
<p>tres</p>
</div>
<div id="desplegablecuatro" >
<p>cuatro</p>
</div>
<div id="desplegablecinco" >
<p>cinco</p>
</div>
<div id="desplegableseis" >
<p>seis</p>
</div>
</div>
</body>
</html>
Código:
tama = 0;
function despliegasema() {
var tamer = this.title;
var tamara = this.value;
tama+=10;
if(!(tama>=tamara)){
document.getElementById(tamer).style.height = tama + 'px';
}
window.setTimeout('despliegasema()',10);
}
en la versión en que uso argumentos, tamer y tamara, son los argumentos que obtengo de la llamada, y tama es una variable global que uso para inicializar pero que luego uso en otra función que une esta, a otra que repliega los divs.
Gracias por su ayuda.
Pd.- el problema está en el settimeout, porque cuando lo quito funciona, pero solo la primera parte, ya que no hace el timeout.