Autor Tema: JavaScript document.getElementsByTagName bucle for cuándo cargan nodos CU01131E (Leído 2535 veces)

Dimitar Stefanov · « **en:** 02 de Febrero 2016, 20:45 »

Aquí dejo los códigos del ejercicio CU01131E del curso JavaScript desde cero.

1) Código :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Portal web</title>
	<script type="text/javascript">
	function mostrarLetras(){
	var palabra=prompt('Por favor introduzca una palabra, para ver sus letras.')
	var msg='';
	for(i=1; i<=palabra.length; i++){
			msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';}
	alert(msg);
	}
	</script>
</head>
<body onload="mostrarLetras()">
</body>
</html>

2) Código:

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>
</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="mostrarContParrafos()">Mostrar texto de los párrafos</h3>
	<script type="text/javascript">
	function mostrarContParrafos(){
	var elementosObtenidos=document.getElementsByTagName('p');
	var msg='';
	for(var i=1; i<=elementosObtenidos.length; i++){
	msg=msg+'Párrafo'+i+': '+elementosObtenidos[i-1].firstChild.nodeValue+'\n';
	}
	alert(msg);
	}
	</script>
</body>
</html>

PD: Intenté solucionar los 2 ejercicios sin condicionales "if else". En el segundo ejercicio dejé el código abajo, no entre las etiquetas <head>...</head> porque creo que para que se obtengan todas las etiquetas <p> del documento la función javascript lo hace solamente hasta donde está escrita. Es decir, si está entre las etiquetas <head>...</head> no podrá obtener ninguna etiqueta <p>. O puede ser que me esté equivocando....

Gracais.

pedro,, · « **Respuesta #1 en:** 05 de Febrero 2016, 19:36 »

Hola dimiste.

El primer ejercicio lo veo bien.

En cuanto al segundo,¿probaste a probar escribiendo el código entre las etiquetas <head>?

Cuando lo pruebes, podrás ver que el código se ejecuta bien. Ten en cuenta que para ejecutar la función mostrarContParrafos(), tienes que pulsar en ...

Código: [Seleccionar]

<h3 class="boton" onclick="mostrarContParrafos()">Mostrar texto de los párrafos</h3>
Y para entonces ya está todo el html cargado.

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 09 de Febrero 2016, 11:28 »

Buenas Pedro.

Pues sí, lo pongo entre las etiquetas <head> ...</head> y si se ejecuta bien y me saca todos los <p>.

A lo que me refería (que releyendo mi respuesta veo que no me he explicado bien) es que si no existiera el botón

Código: [Seleccionar]

<h3 class="boton" onclick="mostrarContParrafos()">Mostrar texto de los párrafos</h3>
y si se pusiera la función así:

Código: [Seleccionar]

<script type="text/javascript">
	
	var palabra=prompt('Por favor introduzca una palabra, para ver sus letras.')
	var msg='';
	for(i=1; i<=palabra.length; i++){
			msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';}
	alert(msg);
	
	</script>

sólo se mostraría bien si estuviera después de todo el código html (entre las etiquetas <body>...</body>.

Pero de la manera que me estás explicando tú, es totalmente correcto. Gracias por la ayuda.

Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: