I have to perform the following operation:
I have a form in which I fill in all the data and when I press the "Save" button the user's name must be loaded in a so-called "list". Well, this is done correctly.
The problem comes when I want to delve into this div:
In addition, the list of characters in the listed layer will be updated, taking the data from the Repository instance. For each Character will be displayed:
- A "character" class layer, within which we have:
- An image that represents the character
- The name of it
Information necessary to do it, the div is called "list" and the CSS code for this it is the following:
.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;
}
Why do not you show me the image in the div listed? Where is the error?
Javascript code Repository class (works OK, I've done test cases):
/* 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;
}
}
Code Javascript class Form (main code):
/*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;
}
}
Required div code from 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>
There should be an image like the example: 