Mostrar Mensajes
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript document.getElementsByName comprobación seleccionado checked CU01130E
« en: 13 de Octubre 2017, 21:59 »
EJERCICIO CU01130E del tutorial de programación web JavaScript desde cero.
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”.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
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”.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo JavaScript - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
label {color: maroon; display:inline-block; padding:5px;}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento) {
var elementosObtenidos = document.getElementsByName(elemento);
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
if (elementosObtenidos[0].checked == true)
{
msg = msg + elementosObtenidos[0].value +", "; elegidos=elegidos+1;
}
if (elementosObtenidos[1].checked == true && elegidos>=1)
{
msg = msg + elementosObtenidos[1].value + "," +" ";
elegidos=elegidos+1;
}
if (elementosObtenidos[2].checked && elegidos>=1) {
msg = msg + elementosObtenidos[2].value + "," +" ";
elegidos=elegidos+1;}
if (elementosObtenidos[3].checked && elegidos>=1) {
msg = msg + elementosObtenidos[3].value;
elegidos=elegidos+1;}
if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';}
if(elegidos>0){
msg= msg + '. Los animales disponibles eran ' +elementosObtenidos.length + '. Pero usted ha seleccionado '+ elegidos;
}
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" value="Enviar" />
<input type="reset" value="Cancelar" />
</label>
</form>
</div>
</body>
</html>
RSS