0

data='[{"isbn":"2839438","nombre":"Programación en PHP","editorial":"Anaya","paginas":"370","autores":["Luke Welling","Mirna Barns"]},{"isbn":"4483838","nombre":"Introducción a AngularJS","editorial":"Riley","paginas":"850","autores":["Jhon Stamos"]},{"isbn":"3382999","nombre":"HTML5, Javascript y CSS","editorial":"Alfaomega","paginas":"450","autores":["Rigoberto Suarez","Manuel Dávalos"]},{"isbn":"8989777","nombre":"JQuery Avanzado","editorial":"Preston","paginas":"950","autores":["Rigoberto Suarez","Manuel Dávalos","Carlos Moctezuma"]},{"isbn":"4483838","nombre":"Introducción a AngularJS","editorial":"Riley","paginas":"850","autores":["Jhon Stamos"]},{"isbn":"2839438","nombre":"Programación en PHP","editorial":"Anaya","paginas":"370","autores":["Luke Welling","Mirna Barns"]},{"isbn":"3382999","nombre":"HTML5, Javascript y CSS","editorial":"Alfaomega","paginas":"450","autores":["Rigoberto Suarez","Manuel Davalos"]},{"isbn":"2839438","nombre":"Programación en PHP","editorial":"Anaya","paginas":"370","autores":["Luke Welling","Mirna Barns"]}]';

buenas gente tengo un error con esta funcion:

function ver(autor){

document.getElementById('titulo').innerHTML ="Libros del autor:"+autor;
}

me marca un error asi: Cannot set property 'innerHTML' of null at ver

en mi codigo HTML tengo un elemento h1 que se llama titulo... solo quiero modificar ese valor cada ves que se llama la funcion desde mi archivo .js

var libros2=[];
var bandera=0;
$(document).ready(function(){
var libros= JSON.parse(data);//se carga el archivo Json en una variable


    var contar1=0,contar2=0,contar3=0,contar4=0;
    var i=0;
    var totales=[];
    var entra=[];
    var respuesta;
    var elemento="";
    for ( i=0; i<libros.length; i++) {

        if (libros[i].isbn=="2839438") {
            contar1++;
        };
         if (libros[i].isbn=="4483838") {
            contar2++;
        };
         if (libros[i].isbn=="3382999") {
            contar3++;
        };
         if (libros[i].isbn=="8989777") {
            contar4++;
        };//for para saber los totales de los libros

    };
    totales.push(contar1);
    totales.push(contar2);
    totales.push(contar3);
    totales.push(contar4);//meter los totales a un arreglo para poderlo recorrer con un for y generar la tabla
   
    for ( i = 0; i < libros.length; i++) {//for para generar tabla
        respuesta=entra.includes(libros[i].isbn);//comprueba si el isbn ya esta en la tabla
        if (respuesta==true) {//si ya esta en la tabla no hace nada y continua con el siguiente elemento
        }
        else{//si no esta en la tabla lo agrega 
        elemento=elemento+'<tr><td>'+libros[i].isbn+'</td>';
        elemento=elemento+'<td>'+libros[i].nombre+'</td>';
        elemento=elemento+'<td>'+libros[i].editorial+'</td>';
        elemento=elemento+'<td>'+libros[i].paginas+'</td>';
        elemento=elemento+'<td>';
        for (var j = 0; j < libros[i].autores.length; j++) {//for para llenar la parte de autores
            if (libros[i].autores.length==1) {
            
            elemento = elemento +'</br>'+"<span onclick="+'"'+"ver("+"'" +libros[i].autores[j]+"'" +")" +'"'+">" +libros[i].autores[j]+'</span>';
            }//primero revisa si solo es un autores, si es el caso solo se pone el autor sin ,
            else{
                    if (j==(libros[i].autores.length-1)) {
                        
                        elemento = elemento +'</br>'+"<span onclick="+'"'+"ver("+"'" +libros[i].autores[j]+"'" +")" +'"'+">" +libros[i].autores[j]+'</span>';
                    }//si es el ultimo autor del libro no debe llevar coma al final y solo lo pone
                    else{
                      
                        elemento = elemento +'</br>'+"<span onclick="+'"'+"ver("+"'" +libros[i].autores[j]+"'" +")" +'"'+">" +libros[i].autores[j]+', '+'</span>';
                    }//si el libro tiene varios autores y este no es el ultimo le agrega una coma y un espacio para separarlos
                }

            };
        elemento=elemento+'</td>';
        elemento=elemento+'<td>'+totales[i]+'</td></tr>';//agrega la cantidad de libros a la tabla
        entra.push(libros[i].isbn);//agrega el isbn al arreglo para llevar el control de los que ya estan en la tabla
        libros2.push(libros[i]);
        }
    };
    document.getElementById('cuerpo').innerHTML = elemento;// muestra la tabla


    });


function ver(autor){
    var elemento="";
    //document.getElementById('titulo').innerHTML ="Libros del autor:"+autor;
    if (bandera==0) {

        var elemento2="";
        elemento2=elemento2+'<div class="table-responsive">';
        elemento2=elemento2+'<table class="table table-hover">';
        elemento2=elemento2+'<thead>';
        elemento2=elemento2+'<tr class="success">';
        elemento2=elemento2+'<th>ISBN</th>';
        elemento2=elemento2+'<th>NOMBRE</th>';
        elemento2=elemento2+'<th>EDIORIAL</th>';
        elemento2=elemento2+'<th>PAGINAS</th>';
        elemento2=elemento2+'<th>AUTORES</th>';
        elemento2=elemento2+'</tr>';
        elemento2=elemento2+'</thead>';
        elemento2=elemento2+'<tbody id="cuerpo2">';
        elemento2=elemento2+'</tbody>';
        elemento2=elemento2+'</table>';
        elemento2=elemento2+'</div>';
        document.getElementById('mostrar').innerHTML = elemento2;
        bandera=1;
    };
    for (var i = 0; i < libros2.length; i++) {
       for (var j = 0; j < libros2[i].autores.length; j++) {
           if (autor==libros2[i].autores[j]) {
                elemento=elemento+'<tr><td>'+libros2[i].isbn+'</td>';
                elemento=elemento+'<td>'+libros2[i].nombre+'</td>';
                elemento=elemento+'<td>'+libros2[i].editorial+'</td>';
                elemento=elemento+'<td>'+libros2[i].paginas+'</td>';
                elemento=elemento+'<td>';
            for (var k = 0; k < libros2[i].autores.length; k++) {
                if (libros2[i].autores.length==1) {
            
                    elemento=elemento+libros2[i].autores[k];
                }
                else{
                    if (k==(libros2[i].autores.length-1)) {
                        
                        elemento=elemento+libros2[i].autores[k];
                    }
                    else{
                      
                        elemento=elemento+libros2[i].autores[k]+', ';
                    }
                }
            };
            elemento=elemento+'</td></tr>';
           };
       };
    };
document.getElementById('cuerpo2').innerHTML = elemento;

}
<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Examen 3</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="jquery/3.2.1/jquery.min.js"></script>
	<script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="data/libros.json"></script>
	<script src="js/recibir.js"></script>
	
</head>
<body>
	<div class="container">
		<div class="table-responsive">
		<table class="table table-bordered" >
			<thead>
				<h2>Libros en existencia</h2>
        		<tr class="success">
            		<th>ISBN</th>
            		<th>NOMBRE</th>
            		<th>EDIORIAL</th>
            		<th>PAGINAS</th>
					<th>AUTORES</th>
					<th>CANTIDAD</th>
        		</tr>
    		</thead>
			<tbody id="cuerpo">
			</tbody>
		</table>
		</div>
		<div id="mostrar">
			<h1 id="titulo"></h1>

		</div>
	</div>
</body>

</html>

8
  • En que parte de tu hmtl has importado el js? Los js se recomiendan importarlos despues del body ya que hay componentes que no se cargan automaticamente.
    – user22539
    el 19 nov. 2017 a las 20:22
  • lo tengo en el head <script src="js/recibir.js"></script>
    – Yept
    el 19 nov. 2017 a las 20:23
  • Usa $(document).ready(function() { function ver(autor){ document.getElementById('titulo').innerHTML ="Libros del autor:"+autor; } });
    – user22539
    el 19 nov. 2017 a las 20:24
  • es que esa funcion la tengo para que cargue una tabla y en esa tabla tengo que dal click y que me muestre informacion... de hecho ya cambie el script despues del body y sigue igual
    – Yept
    el 19 nov. 2017 a las 20:26
  • usa mi comentario anterior, eso deberia funcionar, ademas seria de utilidad que muestres el archivo .html
    – user22539
    el 19 nov. 2017 a las 20:27

1 respuesta 1

1

El error es causado por la siguiente línea:

document.getElementById('mostrar').innerHTML = elemento2;

Cuando tu asignas de esa forma estas reemplazando todo las etiquetas internas con el nuevo contenido(se elimina el contenido anterior) y como <h1 id="titulo"> </h1> es parte de ella, por consecuencia es eliminada. Lo que debes hacer es añadir para ello cambia esa línea a:

document.getElementById('mostrar').innerHTML += elemento2;
1
  • :OOOOOOOOOOOOOOOOOOOOOOOOOOOOO que genial muchisimas gracias!!!!!!! no sabia eso maestrazo!!
    – Yept
    el 19 nov. 2017 a las 21:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.