Autor Tema: getElementsByName JavaScript. onsubmit al enviar formulario checked CU01130E (Leído 2481 veces)

Pandemia · « **en:** 04 de Enero 2017, 22:25 »

Buenas noches amigos aquí dejo una posible solución al ejercicio CU01130E del tutorial básico de programación web con JavaScript....

Citar

EJERCICIO

Responde a las siguientes preguntas:

a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.

c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.

a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

Funcionar si funciona, ¿porque? porque cualquier valor introducido en un if lo interpreta como un valor booleano (true o false). En este caso cuando el intérprete recibe if (elementosObtenidos[1].checked) lo que hace es evaluar elementosObtenidos[1].checked y determina si su valor es equivalente a true ó false.

b)

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Curso JavaScript - aprenderaprogramar.com</title>
	
	<style type="text/css">
		body {
			background-color: yellow;
			font-family: fantasy;
		}
		label {
			color: #5CF044;
			display: inline-block;
			padding: 5px;
		}
	</style>
	
	<script type="text/javascript">
		function informarItemsElegidos(elemento) {
		
			var elementosObtenidos = document.getElementsByName(elemento);
		
			var msg = 'Los animales que usted ha elegido son: ';
		
			var elegidos = 0;
		
			if (elementosObtenidos[0].checked ) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
		
			if (elementosObtenidos[1].checked && elegidos>=1) {msg = msg + ', ';}
			if (elementosObtenidos[1].checked) {msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
		
			if (elementosObtenidos[2].checked && elegidos>=1) {msg = msg + ', ';}
			if (elementosObtenidos[2].checked) {msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
		
			if (elementosObtenidos[3].checked && elegidos>=1) {msg = msg + ', ';}
			if (elementosObtenidos[3].checked) {msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;}
		
			if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';}
			alert (msg);
		}
	</script>

</head>
<body>
	
	<div id="cabecera">
		
		<h1>Portal web aprenderaprogramar.com</h1>
		<h2>Didáctica y divulgación de la programación</h2>

	</div>

	<!--Formulario de contacto-->

	<div style="width: 450px;">
		
		<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">
			
			<p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>

			<label for="nombre"><span>Nombre:</span><input id="nombre" type="text" name="nombre"></label>
			<label for="apellidos"><span>Apellidos:</span><input id="apellidos" type="text" name="apellidos"></label>

			<p>Elige los animales que te gusten: </p>

			<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León & nbsp;& nbsp;& nbsp;  </label>

			<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre & nbsp;& nbsp;& nbsp;  </label>

			<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo & nbsp;& nbsp;& nbsp;   </label>

			<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar</label>

			<label for="email"><span>Correo electrónico</span> <input id="email" type="text" name="email" /></label>

			<label>
				
				<input type="submit" name="Enviar" />
				<input type="reset" name="Cancelar" />

			</label>

		</form>

	</div>

</body>
</html>

c)

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Curso JavaScript - aprenderaprogramar.com</title>
	
	<style type="text/css">
		body {
			background-color: yellow;
			font-family: fantasy;
		}
		label {
			color: #5CF044;
			display: inline-block;
			padding: 5px;
		}
	</style>
	
	<script type="text/javascript">
		function informarItemsElegidos(elemento) {
		
			var elementosObtenidos = document.getElementsByName(elemento);
		
			var msg = 'El número disponible de animales era: ';
		
			var elegidos = 0;
		
			if (elementosObtenidos[0].checked ) {elegidos=elegidos+1;}
					
			if (elementosObtenidos[1].checked) {elegidos=elegidos+1;}
					
			if (elementosObtenidos[2].checked) {elegidos=elegidos+1;}
					
			if (elementosObtenidos[3].checked) {elegidos=elegidos+1;}
					
			alert (msg + elementosObtenidos.length + ' Y ha elegido: ' + elegidos);
		}
	</script>

</head>
<body>
	
	<div id="cabecera">
		
		<h1>Portal web aprenderaprogramar.com</h1>
		<h2>Didáctica y divulgación de la programación</h2>

	</div>

	<!--Formulario de contacto-->

	<div style="width: 450px;">
		
		<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')">
			
			<p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>

			<label for="nombre"><span>Nombre:</span><input id="nombre" type="text" name="nombre"></label>
			<label for="apellidos"><span>Apellidos:</span><input id="apellidos" type="text" name="apellidos"></label>

			<p>Elige los animales que te gusten: </p>

			<input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León & nbsp;& nbsp;& nbsp;  </label>

			<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre & nbsp;& nbsp;& nbsp;  </label>

			<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo & nbsp;& nbsp;& nbsp;   </label>

			<input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar</label>

			<label for="email"><span>Correo electrónico</span> <input id="email" type="text" name="email" /></label>

			<label>
				
				<input type="submit" name="Enviar" />
				<input type="reset" name="Cancelar" />

			</label>

		</form>

	</div>

</body>
</html>

Saludos Y gracias de antemano.....

pedro,, · « **Respuesta #1 en:** 09 de Enero 2017, 22:27 »

Hola Pandemia.

Tus respuestas al ejercicio son correctas, sobre el apartado a, en el siguiente enlace hay una explicación que deja más claro el motivo.

https://www.aprenderaprogramar.com/foros/index.php?topic=3867.msg16522#msg16522

Saludos.

bermartinv · « **Respuesta #2 en:** 09 de Enero 2017, 22:54 »

Comentarte una cosa, los caracteres que quieres introducir precedidos de & va todo junto. En este caso en el apartado b), el espacio sería ' '. Por lo demás, ya te lo dijo pedro,,
Saludos.

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

Noticias: