ページがロードされた後にヌルとは異なるgetElementByIdをしている方法

Abilys38：

私は、データに基づいてページを生成するために口ひげを使用しています。

私の問題は：私は口ひげによって生成されたページにgetElementByIdをする必要があります。しかし、それは常にNULLを返します。私はそれを修正することができますどのように任意のアイデアを持っていますか？（私は問題を抱えています部分にmain.jsにコメントを残しました。）

私の場合を再現する3ページ：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>


<body>

    <div id="test-id">

<!-- Generated Content  -->

    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="mustache.js"></script>
    <script src="../node_modules/file-system/file-system.js"></script>
</body>
</html>

template_page.html （ここで、データに基づいてページを生成口ひげ）

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>

    <div id="template-div">

    <!-- part filled by Mustache -->

    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="mustache.js"></script>
    <script src="../node_modules/file-system/file-system.js"></script>

</body>
</html>

そして、JavaScript一部

main.js

document.addEventListener('DOMContentLoaded', function() {

// I get NULL but I want to find a way to get a None null value !!!
console.log(document.getElementById("test-get-id-value"));


// Data to get the different pages
var ALL_DATA = [
{
    'lastname': 'lastname_1',
    'firstname': 'firstname_1'
},
{
    'lastname': 'lastname_2',
    'firstname': 'firstname_2'
},
{
    'lastname': '"lastname_3"',
    'firstname': 'firstname_3'
}
];

// Function to get the different links
function displayData(obj_name) {

var theDiv = document.getElementById("test-id");

obj_name.forEach(doc => {
       var lastname = doc['lastname'];
       var firstname = doc['firstname'];

       newdiv = document.createElement("div")
       var text = document.createTextNode(lastname + ' ' + firstname);
       var anchor_value = document.createElement("a")
       url = lastname + firstname + '.html'
       anchor_value.setAttribute("href", "template_page.html" + "?firstname=" + firstname + "&lastname=" + lastname);
       anchor_value.setAttribute("class", "link-a");
       anchor_value.onclick = createPage();
       anchor_value.appendChild(document.createTextNode("Contact him"));
       newdiv.appendChild(text);
       newdiv.appendChild(anchor_value);
       theDiv.appendChild(newdiv);

    });
};

displayData(ALL_DATA);


// Function to create the PAGE based on the Data
function createPage() {

    // get url parameters
    var url = new URL(window.location.href);
    var firstname_value = url.searchParams.get("firstname");
    var lastname_value = url.searchParams.get("lastname");

    // get the data needed
    data = {
    'lastname': lastname_value,
    'firstname': firstname_value
    };

    var template = 

    `
    <h1> Welcome, {{firstname}} </h1>
    <h2> Your last name: {{lastname}} </h2>
    <form id="test-get-id-value">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
    </form>

    `

    var html = Mustache.render(template, data);
    $("#template-div").html(html);

};


});

アヌラーグSrivastava氏：

あなたのリスナーDOMContentLoaded火災あなたが最初にあなたのページをロードし、その瞬間に、何のHTMLはによってレンダリングされていませんMustache

あなたは、テンプレートのレンダリング後ので、すべてのあなたのロジックを実行し、テンプレートがレンダリングされた後にのみ、null以外の値を取得できます。

var html = Mustache.render(template, data);
$("#template-div").html(html);
var el = document.getElementById("test-get-id-value");
// Now run the logic you need

ページがロードされた後にヌルとは異なるgetElementByIdをしている方法

おすすめ