Buenas tardes. Dejo otra solución más del siguiente ejercicio del curso JavaScript desde cero y precisamente de la entrega CU01179E.
Código del ejercicio:
<!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>Preguntas:
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?
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';
}
b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?
La variable 'radioButTrat' es una variable global porque se ha declarado sin 'var'.
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?
La variable 'radioButTrat' es un objeto NodeList de tipo array-like
Sabemos que instrucciones como getElementsByTagName nos devuelven una colección de nodos que en algunos momentos se denomina “array” de nodos. Sin embargo, lo que devuelven este tipo de métodos no es exactamente un array, sino una estructura de datos denominada NodeList.
Respuesta obtenida de la entrega CU01136E del curso JavaScript desde cero
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=816:nodelist-javascript-diferencias-de-nodelist-y-array-acceso-a-texto-nodos-textcontent-innertext-cu01136e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206El método length es aplicable tanto a objetos NodoList como a arrays.
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.
Única línea cambiada:
if(elementosDelForm[i].type == 'checkbox'){radioButTrat.push(elementosDelForm[i]);}
}El código quedaría así:
<!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'); //Elementos 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'){radioButTrat.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>La consola nos da el error: "radioButTrat.push in not a function"
Eso ocurre porque el método push es aplicable solamente a los arrays
push(x) Añade x al final del array como nuevo (o nuevos) elemento, y devuelve la nueva longitud del array.
Respuesta obtenida de la entrega CU01153E del curso JavaScript desde cero
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=834:funciones-arrays-javascript-push-sort-ordenar-numeros-concat-join-pop-shift-slice-splice-etc-cu01153e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?
Son el fondo de un elemento HTML distinto de img.
f) ¿checkBoxSel es un array o un NodeList de tipo array-like?
La variable checkBoxSel es un array. Hemos explicado más arriba las diferencias entre un array un un NodeList.
g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?
Eso significa que o se toma como valor el valor de la variable 'checkBosSel' o en su defecto '------'.
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?
Recuperamos la opción seleccionada del select con id="ciudad".
La propiedad selectedIndex del elemento select nos devuelve el índice numérico de la opción seleccionada
Respuesta obtenida de la entrega CU01179E del curso JavaScript desde cero.
Gracias.
Tema: JavaScript Código dinámico formulario, select, checked, selectedIndex CU01179E (Leído 2964 veces)
RSS -
WAP2