我正在使用Moustache来基于数据生成页面。
我的问题：我需要在Mustache生成的页面中获取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);
};
});
DOMContentLoaded的侦听器在您首次加载页面时触发，并且此刻Mustache尚未呈现任何html
仅在渲染模板后才能获得非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