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>
$(document).ready(function() { function ver(autor){ document.getElementById('titulo').innerHTML ="Libros del autor:"+autor; } });