1. ホーム
  2. javascript

[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。

2022-01-28 19:05:49

質問

次のようなエラーが発生します。

Uncaught TypeError: null のプロパティ 'appendChild' を読み取ることができません。

myRequest.onreadystatechange @ script.js:20

次のコードで

// index.html 
<html>
    <head>
        <title>Simple Page</title>
    </head>
    <body>
        <div id="mainContent">
            <h1>This is an AJAX Example</h1>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

そして、これが私のJavaScriptファイルです。

// script.js
// 1. Create the request

var myRequest;

// feature check!
if(window.XMLHttpRequest) { // Firefox, Safari
    myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){ // IE
    myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}


// 2. Create an event handler for our request to call back 
myRequest.onreadystatechange = function() {
    console.log("We were called!");
    console.log(myRequest.readyState);
    if(myRequest.readyState === 4){
        var p = document.createElement("p");
        var t = document.createTextNode(myRequest.responseText);
        p.appendChild(t);
        document.getElementById("mainContent").appendChild(p);
    }
};

// 3. open and send it
myRequest.open("GET","simple.txt", true);

// any parameters?
myRequest.send(null);

そして、以下がその内容です。 simple.txt

これは単純なテキストファイルの中身です。

htmlの一番下にscriptタグを貼りました。 ここで @Tejs が提案したように が、まだこのエラーが出ます。

どうすればいいですか?

コールバックが実行されるとき、ページ上に id "mainContent" を持つ要素がないのですが。

行に

document.getElementById("mainContent").appendChild(p);

部分 document.getElementById("mainContent") が返ってくる null