Hola jor_0203, como estás?
Mira el código que desarrollé para ayudarte con este tema:
Código Javascript
:
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>
<script language="Javascript">
var temporizadorplegar;
var temporizadordesplegar;
function detectar (evt) {
//evt, es una variable que se recibe implícitamente cuando se utiliza el modo
// no invasivo de manejar eventos, pero en este caso se llama la
// función detectar desde los botones, pasándole, el evento como tal
var btnId = evt.target.id;
//Por medio del evento, y haciendo referencia a la fuente que lo generó (botón)
//utilizando la palabra reservada target, podemos saber el id
switch (btnId) {
case "r1": recoger("contenido");
break;
case "d1": desplegar("contenido");
break;
case "r2": recoger("contenido2");
break;
case "d2": desplegar("contenido2");
break;
}
//Dependiendo del id, utilizamos un switch para llamar la función específica
//pasándole el nombre del div que queremos animar
}
function recoger(div){
clearTimeout(temporizadordesplegar);
var altura=parseInt(document.getElementById(div).style.height);
if (altura>0) {
altura--;
document.getElementById(div).style.height= altura+"px";
temporizadorplegar=setTimeout(recoger,10, div);
//Esta es la sintaxis que reconocen firefox y google chrome, para pasar
//parámetros a una función llamada con setTimeOut. No es obligatorio
//poner el nombre de la función entre paréntesis. La variable div, es
//la que recibe el id del div que vamos a animar.
} else {
clearTimeout(temporizadorplegar);
}
}
function desplegar(div){
clearTimeout(temporizadorplegar);
var altura=parseInt(document.getElementById(div).style.height);
if (altura < 305){
altura++;
document.getElementById(div).style.height= altura+"px";
temporizadordesplegar=setTimeout(desplegar,10,div) ;
} else {
clearTimeout(temporizadordesplegar);
}
}
</script>
</head>
<body>
<input type="button" id="r1" value="Recoger" onclick="detectar(event)" />
<input type="button" id="d1" value="Desplegar" onclick="detectar(event)" />
<!-- Una regla de html es que los id no se pueden repetir, cada id es único como nuestro número de identificación. Por eso le puse un id diferente a cada botón. Por otro lado, se llama la función detectar, pasándole como parámetro, el evento, explicado en el código javascript anterior.-->
<div id="contenido" style="width:720px; height:305px; background-color:#006699;"></div>
quiero que estos botones tambien puedan reutilizar la primera funcion pero no he podido, para hecer una funcion global
alguien sabe como
<br>
<input type="button" id="r2" value="Recoger" onclick="detectar(event)" />
<input type="button" id="d2" value="Desplegar" onclick="detectar(event)" />
<div id="contenido2" style="width:720px; height:305px; background-color: #CC0000;"></div>
</body>
</html>
Debe haber un modo diferente de hacer esto, ya que el atributo style, es decir aplicar estilo inline, ya no es permitido, o por lo menos no es recomendable, por eso es necesario buscar el modo de no hacer esto.
Lo mismo con el evento onclick, es preferible asignar las funciones a los eventos por medio de manejadores semánticos, es decir, se quita el onclick de la etiqueta, si deja asi´:
y desde javascript se le asignan los eventos así:
Código Javascript
:
Ver originalwindow.onload = function () {
document.getElementById("r1").onclick = detectar;
}
De este modo queda más límpio el código html y se vé más profesional.
Espero entiendas cuales son las ventajas de esto y la de utilizar funciones como attachEvent o addEventListener.
Saludos