Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 05 de Octubre 2016, 12:28
-
getElementsByName JavaScript. onsubmit al enviar formulario form con input type submit. Ejemplo (CU01130E)
Aquí el ejercicio resuelto CU01130E del tutorial sobre fundamentos de programación web con JavaScript:
1) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
R= Si, porque la palabra clave "checked" indica que la casilla esta activada por lo tanto es true. Si existiese una palabra clave llamada "unchecked" esta seria false
2) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.
R= Aquí el código resultado:
Código HTML(JavaScript Interno)
<!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) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[0].checked) {msg = msg + ', ';}
if (elementosObtenidos[1].checked) {
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[1].checked) {msg = msg + ', ';}
if (elementosObtenidos[2].checked) {
msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[2].checked) {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 </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo </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>Aqui no pude resolverlo tan bien como esperaba.
3) 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”.
Código HTML(JavaScript Interno)
<!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 cantidadInicial= document.getElementsByName(elemento).length;
var msg = 'Animales que ha elegido que le gustan incluye: ';
var elegidos = 0;
if (elementosObtenidos[0].checked) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[0].checked) {msg = msg + ', ';}
if (elementosObtenidos[1].checked) {
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[1].checked) {msg = msg + ', ';}
if (elementosObtenidos[2].checked) {
msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;}
if (elegidos>=1 && elementosObtenidos[2].checked) {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+".");
alert("La cantidad de animales posibles es de "+cantidadInicial+" y te quedan "+(cantidadInicial - 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 </label>
<input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo </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>
EXTRA
Como siempre voy a seguir con el curso hasta el final pero seré menos constante debido al inicio de clases. Para que tengan en cuenta.
Link del curso: https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=808:getelementsbyname-javascript-onsubmit-al-enviar-formulario-form-con-input-type-submit-ejemplo-cu01130e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206 (https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=808:getelementsbyname-javascript-onsubmit-al-enviar-formulario-form-con-input-type-submit-ejemplo-cu01130e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206)
-
Hola Chompy todo bien
Te copio un comentario de otro hilo:
La respuesta a, quedaría mejor explicada de la siguiente forma(es una explicación que dio Ogramar en otro post):
El motivo es que cualquier expresión dentro de un if se intenta traducir por parte del intérprete en un valor booleano (true o false) o en un valor numérico (0 que equivaldría a false, u otro valor equivaldría a true). 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. Por tanto, genera el mismo resultado que if (elementosObtenidos[1].checked == true)
Saludos