Hola. Estoy empezando a interiorizarme con javascript. Tengo un problema.
Según tengo entendido
addEventListener permite que se ejecute la función indicada en el 2º parámetro, cuando ocurra el evento especificado en el 1º parámetro.
Tengo una página html que tiene una lista
UL con id 'gal' con cuatro elementos
LI.
Con un script, genero otra lista encima de la anterior cuyo id es 'nav' con cuatro elementos
LI, cada uno de los cuales tienen un único elemento
A. La función de esta lista generada sería la de
menu de navegación.
Luego, agrego un
addEventListener para cada elemento A de la lista generada para que al hacer click en ellos se ejecute una función que muestre solo un elemento de la lista original, mientras que oculte los otros (display:none).
El problema es que la función especificada en addEventListener no se ejecuta al hacer click en un elemento A, sino que se ejecuta apenas se carga la página
Aquí está el script:
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
<script type = 'text/javascript'>
window.onload = function() {
function muestraOculta($idEl)
{
var $f = 0;
while ( $f < $lis.length )
{
if ( $lis[$f].id == 'pag' + $idEl )
{
$lis[$f].style.display = 'list';
}
else
{
$lis[$f].style.display = 'none';
};
$f++;
};
}
function crearNav()
{
var $newUl = document.createElement('ul');
$newUl.setAttribute("id","nav");
for ( var $i = 0 ; $i < $lis.length ; $i++ )
{
var $newLi = document.createElement('li');
var $newA = document.createElement('a');
var $newT = document.createTextNode($i+1);
$newA.setAttribute("href","#pag"+($i+1));
$newA.setAttribute("id",$i+1);
$newA.appendChild($newT);
$newLi.appendChild($newA);
$newUl.appendChild($newLi);
//$newA.addEventListener('click', muestraOculta($newA.id), false);
};
document.body.insertBefore($newUl, $gal);
$links = document.getElementById('nav').getElementsByTagName('a');
for ( var $k = 0 ; $k < $links.length ; $k++ )
{
$links[$k].addEventListener('click', muestraOculta($links[$k].id), false);
};
};
var $gal = document.getElementById('galeria');
var $lis = $gal.getElementsByTagName('li');
crearNav();
};
</script>
</head>
<body>
<h1>Galería de imágenes (sin imágenes)</h1>
<ul id = "galeria">
<li id = "pag1">
<h2>Primera página</h2>
<p>Este es el párrafo presente en la <strong>primera</strong> página.</p>
</li>
<li id = "pag2">
<h2>Segunda página</h2>
<p>Este es el párrafo presente en la <strong>segunda</strong> página.</p>
</li>
<li id = "pag3">
<h2>Tercera página</h2>
<p>Este es el párrafo presente en la <strong>tercera</strong> página.</p>
</li>
<li id = "pag4">
<h2>Cuarta página</h2>
<p>Este es el párrafo presente en la <strong>cuarta</strong> página.</p>
</li>
</ul>
</body>
</html> Gracias por su ayuda.
Pd: Estoy utilizando Chrome