JavaScript - Alert con getElementsByTagName

Alert con getElementsByTagName

Publicado por joel eduardo (1 intervención) el 31/07/2015 20:52:36

<body>
parrafo 1 
parrafo 2
parrafo 3
parrafo 4
</div>
</body>

como puedo hacer para con js mandar un alert que diga diste click a parrafo 1 o 2 o 3 sin necesidad de darles un ID?
supongo que es con getElementsByTagName los guardo en una variable pero de alli ya no se que hacer, apenas estoy iniciando en js

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 18

Val: 95

Alert con getElementsByTagName

Publicado por Vainas (258 intervenciones) el 01/08/2015 10:53:57

Buenas:

Tienes razon hay que usar getElementsByTagName. para partir del documento principal tendras que poner antes document. asi que queda de la siguiente manera:

var etiquetas = document.getElementsByTagName("p");

Todo esto lo vas a meter en una variable como ve anteriormente llamada etiquetas. Esta variable tendra un array con todas las etiquetas "p" que haya conseguido en el documento (piensa que podrias comenzar en cualquier otro punto de un documento a buscar para que me entiendas).

Para recorrer esa variable usas un for. cuando la recorres tienes algo asi:

etiquetas[i]

Esto es cada etiqueta "p" dentro de javascript. La pregunta es, que podemos hacer con ellas? pues tiene una propiedad que es onclick a la cual le asignas una funcion que se ejecutara cada vez que hagas click en esa etiqueta. Que haces dentro de la función? pues poner un "alert". Pero ¿como sacas el valor que esta dentro del parrafo? pues cuando se ejecuta un onclick tiene dentro una propiedad que se llama this que hace referencia a el elemento donde se esta ejecutando ese onlick. cuando se ejecute la funcion onclick sobre una etiqueta, "this" sera una variable (es un objeto) que tiene dentro a la etiqueta "p" donde has hecho click. finalmente ese objeto tiene una propiedad que se puede consultar que se llama innerHTML que es el HTML que hay dentro de esa etiqueta.

Igual me he liado un poco explicandote pero espero que quede el concepto claro.

Aqui el ejemplo final: http://jsfiddle.net/p3bas5a5/

Espero que te sirva.

Saludos.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar