Dejo el siguiente ejercicio.
Teniendo el siguiente código.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css"> body {margin-left:30px; font-family: sans-serif;} h4 {margin:0;} div {float:left;}
.estiloForm, #encuadraImagen, #datos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; }
.estiloForm { width: 330px; padding:10px;} #datos {margin-top: 20px; height:226px; padding:10px;}
#encuadraImagen {width:100px; height:100px; text-align:center;}
.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}
br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}
</style>
<script type="text/javascript">
window.onload = function () {
/* Variables globales (por estar declaradas sin var) */
casillaDatos = document.getElementById('datos'); //Nodo donde vamos a mostrar los datos
radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons
checkboxElements = new Array();
var elementosDelForm = document.getElementsByTagName('input'); //Elementos input
var elementosSelect = document.getElementsByTagName('select');
for(var i=0; i<elementosDelForm.length;i++) {
if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);}
else {elementosDelForm[i].addEventListener("change", actualizarDatos);}
if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);}
}
for (var i=0; i<elementosSelect.length;i++) {elementosSelect[i].addEventListener("change", actualizarDatos);}
}
function actualizarDatos() {
var rutaImagen = '';
var radioButSelValue = '';
for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }
if (radioButSelValue != ''){
if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}
document.getElementById('encuadraImagen').innerHTML = '';
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';
}
var checkBoxSel = new Array();
for (var i=0; i<checkboxElements.length;i++) {
if (checkboxElements[i].checked ==true) {checkBoxSel.push(checkboxElements[i].name);}
}
var elementoCiudad = document.getElementById('ciudad');
casillaDatos.innerHTML='<h4> Datos introducidos: </h4><p>Tratamiento: '+(radioButSelValue||' --- ')+'</p>'+
'<p>Nombre: '+document.getElementById('nombre').value+'</p>'+
'<p>Apellidos: ' + (document.getElementById('apellidos').value||' --- ')+'</p>'+
'<p>Dirección: ' + (document.getElementById('direccion1').value||' --- ')+'</p>'+
'<p>Ciudad: ' + (elementoCiudad.options[elementoCiudad.selectedIndex].text||' --- ')+'</p>'+
'<p>Preferencias: ' + (checkBoxSel||' --- ')+'</p>';
}
</script></head>
<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>
<div class="estiloForm">
<form name ="formularioContacto" method="get" action="#">
<label>Tratamiento</label>
<input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.
<input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>
<label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>
<label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>
<label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/>
<label>Ciudad</label><select id="ciudad" name="ciudad">
<option value="">Elija opción</option>
<option value="Mexico">México D.F. (MX)</option>
<option value="Madrid">Madrid (ES)</option>
<option value="Santiago">Santiago (CL)</option>
</select><br/>
<label>Preferencias</label><input name="Libros" type="checkbox" />Libros
<input name="Peliculas" type="checkbox" />Películas
<input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>
</div>
<div style="float:left;">
<div id="encuadraImagen"><h1> ? </h1></div><br/>
<div id="datos" style="float:left;"><h4> Datos introducidos: </h4></div>
</form>
</div>
</body></html>a) ¿Qué código es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?
En esta linea...
if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}se detecta el click en el radio buttons y llama a la función actualizarDatos, en esta fucinión en la linea...
for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} }se comprueba que radio buttons está seleccionado y en esta otra linea...
if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';}comprobamos si se usará una imagen o la otra, y en la siguiente linea...
document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat';mostramos la imagen.
b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?
Es una variable global, porque las variables declaradas sin var son de ámbito global.
c) ¿radioButTrat es una array o un objeto NodeList de tipo array-like? ¿El método length es aplicable a objetos de tipo array? ¿El método length es aplicable a objetos de tipo array-like?
Es un NodeList de tipo array-like que contiene todos los nodos de tipo element que tienen como atributo name = "tratamiento".
Si.
Si.
d) ¿Qué ocurre si tratas de aplicar el método push a radioButTrat? Escribe el código para ello. ¿Qué mensaje visualizas en la consola? Busca información y trata de explicar por qué ocurre esto.
No fui capaz de sacar nada en claro en este punto.
e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?
Es el fondo de un elemento HTML.
f) ¿checkBoxSel es un array o un NodeList de tipo array-like?
Es un array.
g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?
Si checkBoxSel tuviese un valor erróneo, se mostraría por pantalla ' --- '.
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?
elementoCiudad.selectedIndex toma el valor del índice de la opción seleccionada en el select, si la opción seleccionada fuese la primera en la lista la linea quedaría así...
elementoCiudad.options[0].textSaludos.
Mostrar Mensajes
RSS