Javascript 加载页面后如何使getElementbyId不同于Null_Javascript_Mustache

Javascript 加载页面后如何使getElementbyId不同于Null

javascript

Javascript 加载页面后如何使getElementbyId不同于Null,javascript,mustache,Javascript,Mustache,我正在使用Mustach根据数据生成页面我的问题：我需要在Mustach生成的页面中获取ElementById。但是，它总是返回NULL。你有什么主意我怎么修吗？（我在main.js中有问题的部分留下了评论。） 3页复制我的案例： index.html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="test-id"> <

我正在使用Mustach根据数据生成页面

我的问题：我需要在Mustach生成的页面中获取ElementById。但是，它总是返回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>

还有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);

};


});

document.addEventListener（'DOMContentLoaded'，function（）{
//我得到空值，但我想找到一种方法来获得非空值！！！
log（document.getElementById（“测试获取id值”）；
//获取不同页面的数据
var ALL_数据=[
{
“lastname”：“lastname_1”，
“firstname”：“firstname_1”
},
{
“lastname”：“lastname_2”，
“firstname”：“firstname_2”
},
{
“lastname”：“lastname_3”，
“firstname”：“firstname_3”
}
];
//函数获取不同的链接
功能显示数据（对象名称）{
var theDiv=document.getElementById（“测试id”）；
对象名称.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（“类”、“链接-a”）；
anchor_value.onclick=createPage（）；
anchor_value.appendChild（document.createTextNode（“联系他”）；
newdiv.appendChild（文本）；
newdiv.appendChild（锚定值）；
第四章附加物儿童（newdiv）；
});
};
显示数据（所有_数据）；
//函数根据数据创建页面
函数createPage（）{
//获取url参数
var url=新url（window.location.href）；
var firstname_value=url.searchParams.get（“firstname”）；
var lastname_value=url.searchParams.get（“lastname”）；
//获取所需的数据
数据={
“lastname”：lastname\u值，
“firstname”：firstname\u值
};
变量模板=
`
欢迎，{{firstname}}
您的姓氏：{{lastname}
名字：



姓氏：

`
var html=Mustache.render（模板、数据）；
$（“#模板div”）.html（html）；
};
});

您的

DOMContentLoaded

侦听器在您第一次加载页面时启动，此时，

Mustache未呈现任何html

只有在呈现模板后才能获得非空值，因此在呈现模板后执行所有逻辑：

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

DOMContentLoaded

不会等待其他脚本添加动态内容。完美！这就是我需要的解决方案

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