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"]}]';good people I have an error with this function:
function ver(autor){
document.getElementById('titulo').innerHTML ="Libros del autor:"+autor;
}
marks me an error like this: Can not set property 'innerHTML' of null at view
in my HTML code I have an element h1 called title ... I just want to modify that value every time the function is called from my .js file
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>