Tengo que realizar la siguiente operación:
Dispongo de un formulario en el cual relleno todos los datos y cuando pulse el botón "Guardar" se me debe cargar el nombre del usuario en un llamado "listado". Bien, ésto me lo realiza correctamente.
El problema viene cuando quiero profundizar en este div:
Además, se actualizará el listado de personajes en la capa listado, tomando los datos de la instancia de Repositorio. Para cada personaje se mostrará:
- Una capa de clase “personaje”, dentro de la cual tenemos:
- Una imagen que representa el personaje
- El nombre del mismo
Información necesaria para realizarlo, el div se llama "listado" y el código CSS para ello es el siguiente:
.personaje{
border:2px solid #00793D;
width:200px;
display:inline-block;
margin:10px;
background-color:white;
padding:10px;
}
.personaje img{
width:150px;
height:225px;
}
.personaje p{
text-align:center;
}
¿Por qué no me muestra la imagen en el div listado? ¿Dónde está el error?
Código Javascript clase Repositorio (funciona OK, he realizado casos de prueba):
/* Definición de Repositorio de personajes */
function Repositorio(){
//Creamos un array de personajes.
this.arrayPersonajes = new Array();
//Devuelve el número total de personajes.
this.getNumero = function(){
return this.arrayPersonajes.length;
}
//Añade un personaje al array.
this.addPersonaje = function (personaje){
this.arrayPersonajes.push(personaje);
}
//Devuelve el objeto Personaje que coincide con el nombre.
this.getPersonaje = function (nombre){
return this.arrayPersonajes[nombre];
}
//Muestra los nombres de los personajes creados.
this.getNombrePersonaje = function (i){
return this.arrayPersonajes[i].nombre;
}
//Elimina el personaje cuyo nombre coincide con el que se pasa como parametro.
this.eliminaPersonaje = function (nombre){
for(var i=0; i<this.arrayPersonajes.length; i++){
if(this.arrayPersonajes[i].nombre == nombre){
this.arrayPersonajes.splice(i,1);
return true;
}
}
return false;
}
//Comprueba si existe un personaje cuyo nombre se pasa por parámetro.
this.existePersonaje = function (nombreRecibido){
for(var i=0; i<this.arrayPersonajes.length; i++){
var nombre = this.arrayPersonajes[i].nombre;
if(nombre == nombreRecibido)
return true; //return this.arrayPersonajes[i];
}
return false;
}
}
Código Javascript clase Formulario (código principal):
/*Creo un objeto/instancia de la clase Repositorio.*/
var miRepositorio = new Repositorio();
/*Registro un evento para cuando termine de cargarse el documento se cargen los eventos necesarios.*/
window.addEventListener('load', iniciar, true);
//Función que se ejecuta tras cargarse el documento y registra el resto de eventos.
function iniciar(){
//Evento para validar los campos y comprobar que los datos son correctos, así como también guardar un personaje en el repositorio.
document.getElementById('guardar').addEventListener('click', guardarPersonaje, false);
//Evento para eliminar un personaje del repositorio. Si coincide el nombre lo eliminamos, sino mensaje de "No encontrado".
document.getElementById('eliminar').addEventListener('click', eliminarPersonaje, false);
//Evento para limpiar todos los campos del formulario.
document.getElementById('limpiar').addEventListener('click', limpiar, false);
}
/******************************************************************************
**************** FUNCIONES PARA LA COMPROBACIÓN DE LOS CAMPOS ****************
******************************************************************************/
//Función que se encarga de validar los campos del formulario.
function guardarPersonaje(evento){
//Valido los diferentes apartados del formulario. Si todo está OK...
if (validarCamposText(this) && comprobarNombre() && comprobarImagen() && comprobarEdad() && comprobarColor() && confirm("¿Deseas enviar el personaje?")){
var nombre = document.getElementById('nombre').value;
var imagen = document.getElementById('imagen').value;
var edad = document.getElementById('edad').value;
var color = document.getElementById('color').value;
//Creamos el objeto de tipo Personaje con los valores del formulario pasados como parámetros.
var personaje = new Personaje(nombre, imagen, edad, color);
//Comprobamos si existe el nombre del personaje en nuestro repositorio...
if(miRepositorio.existePersonaje(nombre)){
//Si existe el nombre ya en el arrayPersonajes...
document.getElementById("informacion").innerHTML="EL PERSONAJE '"+nombre+"' YA EXISTE.";
limpiar();
}else{ //Si no existe el nombre del personaje en el repositorio, lo agregamos.
//Añadimos el personaje al repositorio. Automáticamente lo añade en el array "arrayPersonajes".
miRepositorio.addPersonaje(personaje);
//Mostramos los personajes en el div "listado".
mostrarPersonajes();
//Si se ha insertado correctamente la información, mensaje de que el personaje fue agregado.
document.getElementById("informacion").innerHTML="EL PERSONAJE '"+nombre+"' SE HA INSERTADO CORRECTAMENTE.";
limpiar();
return true;
}
}else{
//Cancelar el evento por defecto del envío del formulario.
evento.preventDefault();
return false;
}
}
//Función para validar todos los campos input de tipo "text".
function validarCamposText(objeto){
//La propiedad form del botón enviar contiene la referencia del formulario dónde está ese botón submit.
var formulario = objeto.form;
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Eliminamos la clase Error que estaría asignada a algún campo.
formulario.elements[i].className="";
}
//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
//Escogemos los que son de tipo "text" y los que están vacíos...
if (formulario.elements[i].type == "text" && formulario.elements[i].value.trim()==""){
//Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
document.getElementById("informacion").style.display="block";
document.getElementById("informacion").innerHTML="EL CAMPO "+formulario.elements[i].name+" NO PUEDE ESTAR VACÍO.";
formulario.elements[i].className="error";
formulario.elements[i].focus();
return false;
}
}
return true;
}
//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
if (!document.getElementById("nombre").value.trim()==""){
var nombre = document.getElementById('nombre').value;
return true;
}else{
document.getElementById("informacion").innerHTML="El campo NOMBRE es obligatorio.";
document.getElementById("nombre").focus();
return false;
}
}
//Función para comprobar que el campo imagen no está vacío.
function comprobarImagen(){
if (!document.getElementById("imagen").value==""){
var imagen = document.getElementById('imagen').value;
return true;
}else{
document.getElementById("informacion").innerHTML="El campo IMAGEN es obligatorio.";
document.getElementById("imagen").focus();
return false;
}
}
//Función para comprobar que el campo edad no está vacío. Sólo admite dos digitos.
function comprobarEdad(){
var patron = /^\d{2}$/;
//Analizamos el patrón.
if (patron.test(document.getElementById("edad").value)){
document.getElementById("edad").className="";
return true;
}else{
document.getElementById("informacion").innerHTML="El campo EDAD es obligatorio.";
document.getElementById("edad").focus();
return false;
}
}
//Función, campo color, que comprueba que no se elige la opción por defecto "Elige uno...".
function comprobarColor(){
if (document.getElementById("color").value != "none"){ //Para comparar con el texto sería: .text="Elige uno..."
var color = document.getElementById('color').value;
return true;
}else{
document.getElementById("informacion").innerHTML="El campo COLOR debe elegir una opción.";
document.getElementById("color").focus();
return false;
}
}
//Mostramos los personajes en el div listado.
function mostrarPersonajes(){
var caja_verde = document.getElementById("listado");
var img = document.createElement("img");
if(miRepositorio.getNumero()>=0){
var codigo = "";
for(var i=0; i<miRepositorio.getNumero(); i++){
img.setAttribute("src", "./images/"+miRepositorio.getNombrePersonaje(i)+".png");
var br = document.createElement("br");
caja_verde.appendChild(br);
codigo += miRepositorio.getNombrePersonaje(i)+" ";
}
caja_verde.innerHTML = codigo;
}
}
//Función para limpiar todos los campos del formulario: de tipo "text".
function limpiar(){
var cajas_texto = document.getElementsByTagName("input");
for(var i=0; i<cajas_texto.length; i++)
if(cajas_texto[i] && cajas_texto[i].type == "text")
cajas_texto[i].value="";
}
//Función para eliminar un personaje del repositorio. Lo eliminaremos mediante el campo "Nombre".
function eliminarPersonaje(){
var nombre = document.getElementById('nombre').value;
//Si existe el nombre en el array "arrayPersonajes", eliminamos el personaje (el objeto completo).
if(miRepositorio.eliminaPersonaje(nombre)){
document.getElementById("informacion").innerHTML="EL PERSONAJE '"+nombre+"' SE HA ELIMINADO DE LA TIENDA.";
//Actualizamos los discos que tenemos en la tienda.
mostrarPersonajes();
limpiar();
return true;
}else{
//Si NO EXISTE ningún personaje con ese titulo/nombre, mensaje.
document.getElementById("informacion").innerHTML="NO EXISTE NINGUN PERSONAJE CON EL NOMBRE '"+nombre+"'.";
document.getElementById("nombre").focus();
return false;
}
}
Código HTML necesario del div:
<div class="linea_formulario">
<label for="nombre">Nombre del personaje</label>
<input type="text" name="nombre" id="nombre" />
<div class="limpia"> </div>
</div>
<div class="linea_formulario">
<label for="imagen">Imagen</label>
<input type="text" name="imagen" id="imagen" />
<div class="limpia"> </div>
</div>
<div id="listado">
Todavía no tienes ningún personaje.
</div>
Personaje(nombre, imagen, edad, color);