Posible solución del ejercicio CU01130E del curso JavaScript desde cero (programación web).
a) Las dos maneras son correctas, tanto: if (elementosObtenidos[1].checked == true) como: if (elementosObtenidos[1].checked). Se produce este efecto, porque el navegador, con la condicional: if (elementosObtenidos[1].checked) intenta averiguar si ha sido seleccionado o no. Y con la condicional: if (elementosObtenidos[1].checked == true) intenta hacer lo mismo. En el segundo caso le damos explícitamente que valore si es verdadera o falsa esta condicional, pero en el primer caso hace dicha comparación automáticamente.
b) El código quedaría así:
<!DOCTYPE html>
<html>
<head>
<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='Los animales que ha elegido: ';
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>
<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="apeliidos"/></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>
</div>
</form>
</body>
</html>
3) El código quedaría de la siguiente manera.
<!DOCTYPE html>
<html>
<head>
<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='El número total de animales disponibles era: ';
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 usted 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>
<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="apeliidos"/></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>
</div>
</form>
</body>
</html>
Gracias.
Tema: CU01130E# getElementsByName. onsubmit al enviar formulario form con input submit (Leído 2697 veces)
RSS -
WAP2