I'm trying to build this site dynamically using AJAX. I load the contents for the "content" div from a SQL query, depending on the previouly pressed button. When I press the "Administrar" button, I want to add some buttons to this "adminButtonContainer", but the following error is displayed:
'Cannot read property 'innerHTML' of nullat XMLHttpRequest.ajaxResponse'
In fact, I can only add new content to the "content" DIV. I've been reading something related to calling the JavaScript functions once every DIV has been loaded, but I can't get to understand it. Also, I would like to accomplish it in an "elegant" way, if possible: not having to add tags in the and things like that.
This is my index.html file, which I would like to keep simple:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="funciones.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body onload="doAjaxQuery(1,1);">
<!-- LEFT MENU -->
<div class="leftMenu">
<!-- GENERAL BUTTONS -->
<div class="buttonContainer">
<button id="inicio" onclick="buttonPressed(1,0);">Inicio</button>
<button id="artistas" onclick="buttonPressed(2,0);">Artistas</button>
<button id="albumes" onclick="buttonPressed(3,0);">Álbumes</button>
<button id="temas" onclick="buttonPressed(4,0);">Temas</button>
<button id="generos" onclick="buttonPressed(5,0);">Géneros</button>
<button id="plataformas" onclick="buttonPressed(6,0);">Plataformas</button>
</div>
<!-- ONLY-ADMIN BUTTONS -->
<div class="adminButtonContainer">
<button onclick="doAjaxQuery(101,1)">Administrar</button>
</div>
</div>
<div id="content" class="content"></div>
</body>
</html>
And here is the JavaScript function that writes correctly into the "content" DIV, but throws an error in any other DIV:
function ajaxResponse() {
if (ajaxObject.readyState == 4) {
if (ajaxObject.status == 200) {
// JSON Decodification
var jsonResponse = JSON.parse(ajaxObject.responseText);
var contentDiv = document.getElementById("content");
var leftMenuDiv = document.getElementById("leftMenu");
var buttonsDiv = document.getElementById("buttonContainer");
var adminButtonsDiv = document.getElementById("adminButtonContainer");
// innerHTML works with contentDiv
setNewTitle(jsonResponse.Title);
contentDiv.innerHTML = "";
contentDiv.innerHTML += jsonResponse.H1;
contentDiv.innerHTML += jsonResponse.Body;
// innerHTML won't work with adminButtonsDiv (or any other but contentDiv):
// ERROR: 'Cannot read property 'innerHTML' of nullat XMLHttpRequest.ajaxResponse'
for (let boton of jsonResponse.BotonesAdmin) {
var bSeccion = boton[1];
var bBoton = boton[2];
adminButtonsDiv.innerHTML += bBoton;
}
} else {
document.write('There was an error. HTTP error code ' + ajaxObject.status.toString() + '.');
return;
}
}
}
Solution 1
ID
is missing in this element <div class="adminButtonContainer">
to
<div class="adminButtonContainer" id="adminButtonContainer">
Solution 2:
If you can't add ID
then change this JS line to use getElementsByClassName
var adminButtonsDiv = document.getElementById("adminButtonContainer");
to
var adminButtonsDiv = document.getElementsByClassName("adminButtonContainer")[0];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.