Saber si existe un punto de ancla JS

[legomolina]

Hola,
vengo a preguntaros sobre un tema que me lleva de cabeza.
Tengo un código PHP que va generando puntos de ancla con letras es decir:

Código HTML:

<a name="a"></a> <a name="b"></a> 

pero no se incluyen todas las letras.
Lo que quería hacer es la típica barrita con todas las letras arriba de las letras para ir directamente a cada una de ellas:

Código HTML:

| <a href="pagina.php#a">A</a> | <a href="pagina.php#letra">Letra</a> etc

pero, como he dicho, no todas las letras se incluyen entonces pensé que podría con un for y un array ir escribiendo todas las letras con las barritas y los enlaces sin necesidad de ir poniendolas una a una pero surgió el problema de que ciertas anclas no existian y me daban errores (lógicamente). Entonces me preguntaba si había alguna forma de detectar las anclas creadas y a esas letras ponerles el enlace y a las demás no. Ej:

Código HTML:

| <a href="pagina.php#a">A</a> | B | C | <a href="pagina.php#d">D</a>
<a name="a"></a><br>
alocado<br>
etc...<br>
<a name="d"></a><br>
disturbio<br>
etc...<br> 

En el codigo anterior solo aparecen con enlace la A y la D porque son las únicas que tienen sus respectivos puntos de ancla.
Espero haberme explicado bien y sobretodo que haya una solución porque me ha costado bastante escribir esta parrafada xDD.
Atentamente,
Cristian Molina

[maycolalvarez]

bueno, con document.getElementByName('a') == null te podría decir, aunque puede existir otra forma

[legomolina]

Hola, lo acabo de probar y no me funciona. Aqui dejo el código que he usado:

Código Javascript:

letras=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
for(i=0;i<letras.length;i++) {                            
   if(document.getElementsByName(letras[i].toUpperCase())!=null) //si existe el punto de ancla
    document.write(' | <a href="lista.php#'+letras[i].toUpperCase()+'">'+letras[i].toUpperCase()+'</a>');
   else
        document.write(' | '+letras[i].toUpperCase());
                                }
document.write(" |");
 

Recuerdo que los puntos de ancla son generados posteriormente por un código php. No se si influirá porque he probado a poner el script despues del código php y tampoco funciona.

[IsaBelM]

a simple vista, hay un par de razones por la que no puede funcionar.

getElementsByName retorna una colección de elementos, de tal modo que lo correcto es

document.getElementsByName(letras[i].toUpperCase())[0]

por otro lado, el uso de write, destruye todo. en su lugar crea un elemento (div, span, ...) y usa innerHTML

[legomolina]

Hola IsaBelM,
he reescrito el código conforme a lo que me sugeriste:

Código Javascript:

<div id="letras">
<script language="javascript" type="text/javascript">
letras=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
     for(i=0;i<letras.length;i++) {
          if(document.getElementsByName(letras[i].toUpperCase())[0])
                document.getElementById('letras').innerHTML=' | <a href="lista.php#'+letras[i].toUpperCase()+'">'+letras[i].toUpperCase()+'</a>';
          else
               document.getElementById('letras').innerHTML=' | '+letras[i].toUpperCase();
}
</script>
  | 
</div>
 

y funciona pero no, es decir, ahora solo me muestra la Z, la última letra, pero me la muestra sin enlace, es decir, correctamente ya que solo tengo los puntos de ancla para la A, la D, la M de momento.
He puesto el div y he sustituido el write por innerHTML. Pero sigue sin funcionar :(.
Igual le estoy exigiendo demasiado a JavaScript... xD
Gracias de todas formas IsaBelM, a ver si alguien encuentra una solución.
Atentamente, Cristian Molina

[zerokilled]

¡buenas gentes!
me asalta la inquietud... si estás creando los anclas desde php, ¿por qué no haces el listado de enlaces también en php? ¿tienes forma de determinar cuales anclas se han creado antes de crear el listado de enlaces? pienso yo, mientras sea posible trabajar eso en un solo entorno, más cómodo podría resultar.

en javascript se puede hacer algo, pero en tu caso particular el problema es que no hay ninguna referencia disponible que sirva como indicación de cuales anclas han sido creados. hay una posibilidad de que se pueda hacer utilizando document.anchors, pero tienes que hacer un proceso de análisis y filtrado. document.anchors devuelve una colección de elementos que tienen definido un ancla (atribudo name). sería cuestión de recorrer esa lista, analizar el atributo name, y crear el enlace.

[madman_18]

Iniciado por legomolina

Hola IsaBelM,
he reescrito el código conforme a lo que me sugeriste:

Código Javascript:

<div id="letras">
<script language="javascript" type="text/javascript">
letras=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
     for(i=0;i<letras.length;i++) {
          if(document.getElementsByName(letras[i].toUpperCase())[0])
                document.getElementById('letras').innerHTML=' | <a href="lista.php#'+letras[i].toUpperCase()+'">'+letras[i].toUpperCase()+'</a>';
          else
               document.getElementById('letras').innerHTML=' | '+letras[i].toUpperCase();
}
</script>
  | 
</div>
 

y funciona pero no, es decir, ahora solo me muestra la Z, la última letra, pero me la muestra sin enlace, es decir, correctamente ya que solo tengo los puntos de ancla para la A, la D, la M de momento.
He puesto el div y he sustituido el write por innerHTML. Pero sigue sin funcionar :(.
Igual le estoy exigiendo demasiado a JavaScript... xD
Gracias de todas formas IsaBelM, a ver si alguien encuentra una solución.
Atentamente, Cristian Molina

Si no estoy muy equivocado, .innerHTML lo que hace es ir machacando el contenido HTML y de ahí que sólo te muestre la Z.... ¿podrías probar a poner .appendHTML? A ver qué sucede y nos cuentas.

[legomolina]

Iniciado por madman_18

Si no estoy muy equivocado, .innerHTML lo que hace es ir machacando el contenido HTML y de ahí que sólo te muestre la Z.... ¿podrías probar a poner .appendHTML? A ver qué sucede y nos cuentas.

Con appendHTML no aparece nada, pero a raíz de eso he probado innerHTML+="";
Pero de todas formas creo que la solución está en la que da zerokilled, es decir, escribir las letras tambien en php y así me quito el javascript.
Gracias a todos por ayudarme a resolver este problema.