Tengo un array con 5 nombres que tienen un estado booleano en true
.
Cuando hago click en cada boton asignado a cada uno de ellos, se convierte en false
.
Lo que quiero conseguir ahora es que esos que esten en false
, me lea los nombres del contenido del array y me los escriba en un h1
del html.
Ejemplo: Hago click en uno de los 5 botones de 5 libros que hay. Cuando hago click, automáticamente ese libro pasa de true
a false
. Ese libro además del booleano tambien tiene asignado un nombre con un constructor.
Lo que quiero es que cuando pulse el boton de un libro me escriba el nombre que tiene ese mismo libro en el html en un h1
.
<!DOCTYPE html>
<html>
<title>BIBLIOTECA ONLINE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!--<link rel="stylesheet" href="stylesfont.css">-->
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif}
.w3-sidenav a {padding:20px}
</style>
<body >
<!-- Sidenav (hidden by default) -->
<nav class="w3-sidenav w3-card-2 w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:25%;min-width:300px" id="mySidenav">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav">☰ Cerrar Menu</a>
<a href="index.html" >INICIO</a>
<a href="librosprestados.html">Libros Prestados</a>
<a href="#about">Libros disponibles</a>
<a href="#about">Buscar Libro</a>
<a href="#about">Eliminar libro</a>
<a href="#about">Actualizar libro</a>
<a href="#about">Tus Libros</a>
<li id="supermenu">
<a href="#about" id="login_alumnos">Login Alumnos</a>
<ul> <!-- segundo nivel desplegable-->
<li><button id="alumno1" value="1" name="usuario" href="#about">Xabier</button></li>
<li><button id="alumno2" value="2" name="usuario" href="#about">Mikel</button></li>
<li><button id="alumno3" value="3" name="usuario" href="#about">Pedro</button></li>
<li><button id="alumno4" value="4" name="usuario" href="#about">Joxe</button></li>
<li><button id="alumno5" value="5" name="usuario" href="#about">Manolo</button></li>
</ul>
</li>
</nav>
<!-- Top menu -->
<div class="w3-top">
<div class="w3-white w3-xlarge w3-padding-xlarge" style="max-width:1200px;margin:auto;">
<div class="w3-opennav w3-left w3-hover-text-grey" onclick="w3_open()">☰ Menú</div>
<div class="w3-right"></div>
<div class="w3-center">BIBLIOTECA EL LIBRO SOLITARIO</div>
</div>
</div>
<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content w3-padding" onclick="w3_close()" style="max-width:1200px;margin-top:100px">
<!-- First Photo Grid-->
<div class="w3-row-padding w3-padding-16 w3-center" id="food">
<div class="w3-quarter" id="libro1">
<img src="imagenes/fotos_libros/1aguallimonero.jpg" alt="Sandwich" style="width:100%">
<h3>Agua del Limonero</h3>
<button id="reserva1" name="boton" value="1">Reservar</button>
<p></p>
</div>
<div class="w3-quarter" id="libro2">
<img src="imagenes/fotos_libros/2elcapitaljpg.jpg" alt="Steak" style="width:100%">
<h3>El Capitan </h3>
<button id="reserva2" name="boton" value="2">Reservar</button>
</div>
<div class="w3-quarter" id="libro3">
<img src="imagenes/fotos_libros/3elimperioinvisible.jpg" alt="Cherries" style="width:100%">
<h3>El Imperio Invisible</h3>
<button id="reserva3" name="boton" value="3">Reservar</button>
</div>
<div class="w3-quarter" id="libro4">
<img src="imagenes/fotos_libros/4laparejadeallado.jpg" alt="Pasta and Wine" style="width:100%">
<h3>La Pereja De Al Lado</h3>
<button id="reserva4" name="boton" value="4">Reservar</button>
</div>
</div>
<!-- segunda lista fotos-->
<div class="w3-row-padding w3-padding-16 w3-center">
<div class="w3-quarter" id="libro5">
<img src="imagenes/fotos_libros/5losenemigosdelcomercio.jpg" alt="Popsicle" style="width:100%">
<h3>Los Enemigos Del Comercio</h3>
<button id="reserva5" name="boton" value="5">Reservar</button>
</div>
<div class="w3-quarter" id="libro6">
<img src="imagenes/fotos_libros/6regresodelcaton.jpg" alt="Salmon" style="width:100%">
<h3>El Regreso Del Catón</h3>
<button id="reserva6" name="boton" value="6">Reservar</button>
</div>
<div class="w3-quarter" id="libro7">
<img src="imagenes/fotos_libros/7tengoganasdeti.jpg" alt="Sandwich" style="width:100%">
<h3>Tengo Ganas De Ti</h3>
<button id="reserva7" name="boton" value="7">Reservar</button>
</div>
<div class="w3-quarter" id="libro8">
<img src="imagenes/fotos_libros/8tresmetroscielo.jpg" alt="Croissant" style="width:100%">
<h3>3 Metros Sobre El Cielo</h3>
<button id="reserva8" name="boton" value="8">Reservar</button>
</div>
</div>
<!-- Pagination -->
<!--
<div class="w3-center w3-padding-32">
<ul class="w3-pagination">
<li><a class="w3-black" href="#">1</a></li>
<li><a class="w3-hover-black" href="#">2</a></li>
<li><a class="w3-hover-black" href="#">3</a></li>
<li><a class="w3-hover-black" href="#">4</a></li>
<li><a class="w3-hover-black" href="#">»</a></li>
</ul>
</div>
-->
<!-- <hr id="about">-->
<!-- About Section -->
<div class="w3-container w3-padding-32 w3-center">
</div>
<!-- <hr>-->
<!-- Footer -->
<footer class="w3-row-padding w3-padding-32">
<div class="w3-third">
</div>
<div class="w3-third">
</div>
<div class="w3-third w3-serif">
</div>
</footer>
<!-- End page content -->
</div>
<script>
// Script to open and close sidenav
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
<script src="main.js"></script>
</body>
</html>
este es el codigo javascript:
class alumno{
constructor (nombre, numero_socio, dni, estado) {
this.nombre = nombre
this.numero_socio = numero_socio
this.dni = dni
this.estado = estado
}
}
var alumno1= new alumno ("Xabier", "1", "22115544K",false)
var alumno2= new alumno ("Mikel", "2", "22115544K",false)
var alumno3= new alumno ("Pedro", "3", "22115544K",false)
var alumno4= new alumno ("Joxe", "4", "22115544K",false)
var alumno5= new alumno ("Manolo", "5", "22115544K",false)
let estudents=new Array()
estudents= [alumno1,alumno2,alumno3,alumno4,alumno5];
//------------------------------------------------------------------//
class libro{
constructor (titulo, autor, codigo, estado) {
this.titulo = titulo
this.autor = autor
this.codigo = codigo
this.estado= estado
}
}
var libro1= new libro ("AGUA DEL LIMONERO", "Stieg Larson", 1,true)
var libro2= new libro ("EL CAPITAN", "Carl Max", 2,true)
var libro3= new libro ("IMPERIO INVISIBLE", "Daniel Stulin", 3,true)
var libro4= new libro ("LA PAREJA DE AL LADO", "Shari La Peña", 4,true)
var libro5= new libro ("LOS ENEMIGOS DEL COMERCIO", "Antonio Escohotado", 5,true)
var libro6= new libro ("EL REGRESO DEL CATON", "Antonio Martin", 6,true)
var libro7= new libro ("TENGO GANAS DE TI", "George RR Martin", 7,true)
var libro8= new libro ("A TRES METROS SOBRE EL CIELO", "Ken Follett", 8,true)
let libreria=new Array()
libreria=[libro1,libro2,libro3,libro4,libro5,libro6,libro7,libro8]
//------------------------------------------------------------------//
//window.onload = function() {
var alumno_logeado="nadie";
var usuarionombre=document.getElementsByName("usuario");
for(let i=0; i<usuarionombre.length; i++){
usuarionombre[i].addEventListener("click", identifica_boton_usuario, false );
}
function identifica_boton_usuario(){
let eventousu=window.event;
for(let i=0; i<estudents.length; i++){
if(estudents[i].numero_socio==eventousu.target.value){
if (estudents[i].estado==false){
alert("Usuario logeado: Hola: " +estudents[i].nombre);
estudents[i].estado=true;
alumno_logeado=estudents[i].nombre;//aqui paso el nombre de alumno seleccionado a una variable
}
else if (estudents[i].estado==true){
alert("Hasta la proxima " +estudents[i].nombre);
estudents[i].estado=false;
alumno_logeado="nadie"
}
}
}
}
//----------------------------------------------------------------
//----------------------------------------------------------------
var botonlibro=document.getElementsByName("boton");
for(let i=0; i<botonlibro.length; i++){
botonlibro[i].addEventListener("click", identifica_boton, false );
}
function identifica_boton(){
let posicion_libro=-1
let eventolibro=window.event;
for(let i=0; i<libreria.length; i++){
if(libreria[i].codigo==eventolibro.target.value && libreria[i].estado==true && alumno_logeado!='nadie'){
libreria[i].estado=false;
posicion_libro=i;
}
}
if(posicion_libro>-1){
alert("Reserva realizada");
}
else if(alumno_logeado=="nadie"){
alert("Logueate")
}
else{
for (let i=0; i<libreria.length; i++){
if(libreria[i].estado==false){
alert("El libro ya lo han reservado")
}
}
}
}