JavaScript - 將內容寫入網頁中的任何 DIV

Question

我正在嘗試使用 AJAX 動態構建此站點。 我從 SQL 查詢加載“內容”div 的內容，具體取決於先前按下的按鈕。 當我按下“Administrar”按鈕時，我想向這個“adminButtonContainer”添加一些按鈕，但顯示以下錯誤：

'無法讀取 nullat XMLHttpRequest.ajaxResponse 的屬性'innerHTML''

實際上，我只能在“內容”DIV 中添加新內容。 我一直在閱讀與在每個 DIV 加載后調用 JavaScript 函數相關的內容，但我無法理解它。 另外，如果可能的話，我想以“優雅”的方式完成它：不必在中添加標簽之類的東西。

這是我的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>

這是正確寫入“內容”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;
        }
    }
}

Answer 1

解決方案1

此元素中缺少ID <div class="adminButtonContainer">

到

<div class="adminButtonContainer" id="adminButtonContainer">

解決方案2：

如果您無法添加ID更改此 JS 行以使用getElementsByClassName

var adminButtonsDiv = document.getElementById("adminButtonContainer");

到

var adminButtonsDiv = document.getElementsByClassName("adminButtonContainer")[0];

JavaScript - 將內容寫入網頁中的任何 DIV

問題描述

1 個解決方案

解決方案1
1 已采納 2017-08-11 08:58:23

JavaScript - 將內容寫入網頁中的任何 DIV

問題描述

1 個解決方案

解決方案1 1 已采納 2017-08-11 08:58:23

解決方案1
1 已采納 2017-08-11 08:58:23