[英]JavaScript - Write content to any DIV in webpage
I'm trying to build this site dynamically using AJAX.我正在尝试使用 AJAX 动态构建此站点。 I load the contents for the "content" div from a SQL query, depending on the previouly pressed button.
我从 SQL 查询加载“内容”div 的内容,具体取决于先前按下的按钮。 When I press the "Administrar" button, I want to add some buttons to this "adminButtonContainer", but the following error is displayed:
当我按下“Administrar”按钮时,我想向这个“adminButtonContainer”添加一些按钮,但显示以下错误:
'Cannot read property 'innerHTML' of nullat XMLHttpRequest.ajaxResponse' '无法读取 nullat XMLHttpRequest.ajaxResponse 的属性'innerHTML''
In fact, I can only add new content to the "content" DIV.实际上,我只能在“内容”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.
我一直在阅读与在每个 DIV 加载后调用 JavaScript 函数相关的内容,但我无法理解它。 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:这是我的index.html文件,我想保持简单:
<!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:这是正确写入“内容”DIV 的 JavaScript 函数,但在任何其他 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解决方案1
ID
is missing in this element <div class="adminButtonContainer">
此元素中缺少
ID
<div class="adminButtonContainer">
to到
<div class="adminButtonContainer" id="adminButtonContainer">
Solution 2:解决方案2:
If you can't add ID
then change this JS line to use getElementsByClassName
如果您无法添加
ID
更改此 JS 行以使用getElementsByClassName
var adminButtonsDiv = document.getElementById("adminButtonContainer");
to到
var adminButtonsDiv = document.getElementsByClassName("adminButtonContainer")[0];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.