Autor Tema: getElementsByTagName JavaScript ejemplo DOM firstChild nodeValue CU01131E  (Leído 2211 veces)

C3PO

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Hola. Os dejo el código de la 2ª parte del ejercicio.

Citar
Crea una función denominada mostrarContParrafos, que utilizando el acceso a los nodos del DOM de tipo párrafo, muestre el texto que contienen. Por ejemplo para el código de ejemplo visto anteriormente el resultado debería ser: Párrafo 1 contiene: manzana; Párrafo 2 contiene: pera. Párrafo 3 contiene: fresa. Párrafo 4 contiene … (etc., hasta que no haya más párrafos).

Lo he probado y funciona :). Pero me surge una duda. Estaba "trasteando" con él y puse esta línea:

"alert(+elementos[5].firstChild.nodeValue);"

En el código aparece comentada. Al ejecutar me pone en pantalla: NaN, sea el que sea el valor del índice del array. ¿Alguién me podría explicar el porque?

Gracias

Código: [Seleccionar]
<!DOCTYPE html>

<html>

<head>

<title>Ejemplo DOM - aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

body {background-color:white; font-family: sans-serif;}

p {font-size: 24px; color: maroon; float: left; margin:10px; border: solid black; padding:10px;}

.boton{padding:15px; width: 330px;  text-align:center; clear:both;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

.boton:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">
function verParrafos(elemento){
var elementos=document.getElementsByTagName(elemento);
//alert(+elementos[5].firstChild.nodeValue);
var msg='';
for (var i=1; i<=elementos.length; i++){
msg=msg+('Párrafo'+i+':'+elementos[i-1].firstChild.nodeValue+ '\n');
}
alert (msg);
}

</script>

</head>

<body>

<h1>Portal web aprenderaprogramar.com</h1>

<h2>Didáctica y divulgación de la programación</h2>

<div style="width:500px; float:left; margin-bottom:30px;">

<p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>

<p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>

<p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>

<p>Nectarina</p><p>Frambuesa</p></div>

<h3 class="boton" onclick="verParrafos('p')">Pulse aquí para mostrar contenido de los párrafos</h3>

</body>
</html>
« Última modificación: 11 de Febrero 2016, 11:42 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:getElementsByTagName JavaScript ejemplo DOM firstChild nodeValue CU01131E
« Respuesta #1 en: 11 de Febrero 2016, 11:44 »
Hola! El ejercicio está bien.

El problema con "alert(+elementos[5].firstChild.nodeValue);"  está en que no es correcto comenzar con un + ya que el + es operador de concatenación pero también operador aritmético, al ponerlo delante te está considerando que es un número y te devuelve NaN

Con esto debería funcionarte alert('Ahora concatenamos un texto con '+elementos[5].firstChild.nodeValue);

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".