Read the names of the contents of an array and write them in an html tag

Question

Read the names of the contents of an array and write them in an html tag

Navigation

#1 by (1 votes)

1

I have an array with 5 names that have a boolean state in true . When I click on each button assigned to each of them, it becomes false .

What I want to get now is that those that are in false , read me the names of the contents of the array and write them to me in a h1 of the html.

Example: I click on one of the 5 buttons of 5 books that there are. When I click, that book automatically goes from true to false . That book besides the Boolean is also assigned a name with a constructor.

What I want is that when I press the button of a book I write the name that has that same book in the html in a 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>

this is the javascript code:

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")
                            }
                        }
                    }        
        }

javascript html dom

asked by XABIBAL 02.02.2017 в 16:25

source

1 answer

AdMob missin adSize on Android Trigger in SQL to send email

score 1 · Answer 1

I would do it in the following way:

function Libro(titulo, autor, codigo, estado) // Constructor
{
   this.titulo = titulo
   this.autor = autor
   this.codigo = codigo
   this.estado= estado
}


//Función que tienes que llamar al hacer clic en un botón
function clicLibro(libro)
{
    //Muestra el titulo del libro en un elemento con la id='tuParrafo'
    document.getElementById("tuParrafo").innerHtml = libro.titulo;
    //Cambia el estado si está en true lo pone en false, y viceversa
    libro.estado = !libro.estado;
}

If you have for example this book:

var libro1= new Libro ("AGUA DEL LIMONERO", "Stieg Larson", 1,true)

You can call the function clicLibro(...) in the following way:

clicLibro(libro1);