forked from marquez.juan/clase-11-ejercicio-integrador
ejercicio 2
This commit is contained in:
36
script.js
36
script.js
@@ -31,3 +31,39 @@ function mostrarTabla(libros) {
|
||||
}
|
||||
// Invocamos la función al inicio para poblar la tabla con los datos del array
|
||||
mostrarTabla(libros);
|
||||
|
||||
//ejercicio 2
|
||||
// creamos las variables pertinentes para fabricar la funcion
|
||||
let botonAgregar = document.querySelector("#boton-agregar");
|
||||
let inputTitulo = document.querySelector("#titulo");
|
||||
let inputAutor = document.querySelector("#autor");
|
||||
let inputAnio = document.querySelector("#anio");
|
||||
let inputCalificacion = document.querySelector("#calificacion");
|
||||
// Generamos el listener en boton-agregar
|
||||
botonAgregar.addEventListener("click",(n)=>{
|
||||
if (inputTitulo.value === "" || inputAutor.value === "" || inputAnio.value === "" || inputCalificacion.value === ""){ // si alguno de los campos esta vacio...
|
||||
alert("Ningun campo puede estar vacio"); // mensaje de error
|
||||
} else if (parseInt(inputCalificacion.value) < 0 || parseInt(inputCalificacion.value) > 10){ // si todos los campos estan llenos, pero la calificacion no esta entre 0 y 10 ...
|
||||
alert("el puntaje tiene que ser del 1 al 10"); // mensaje de error
|
||||
} else { // si llegamos hasta aqui es porque el codigo no presenta errores, por lo tanto reciclamos un poco del codigo del ejercicio anterior para crear elementos a la tabla
|
||||
// por cada libro creado en el formulario...
|
||||
// creamos 1 row y 4 td
|
||||
let tableBody = document.querySelector("tbody");
|
||||
let nuevoRow = document.createElement("tr");
|
||||
let tdTitulo = document.createElement("td");
|
||||
let tdAutor = document.createElement("td");
|
||||
let tdAnio = document.createElement("td");
|
||||
let tdPuntaje = document.createElement("td");
|
||||
//la llenamos con el contenido correspondiente
|
||||
tdTitulo.textContent = inputTitulo.value;
|
||||
tdAutor.textContent = inputAutor.value;
|
||||
tdAnio.textContent = inputAnio.value;
|
||||
tdPuntaje.textContent = inputCalificacion.value;
|
||||
// y las anexamos a la tabla html de forma correspondiente
|
||||
tableBody.appendChild(nuevoRow);
|
||||
nuevoRow.appendChild(tdTitulo);
|
||||
nuevoRow.appendChild(tdAutor);
|
||||
nuevoRow.appendChild(tdAnio);
|
||||
nuevoRow.appendChild(tdPuntaje);
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user