Как получить getElementbyId, отличный от Null, после загрузки страницы - PullRequest
Новая
       22

Как получить getElementbyId, отличный от Null, после загрузки страницы

3 голосов
/ 10 марта 2020

Я использую усы для создания страниц на основе данных.

Моя проблема: Мне нужно получить элемент на странице, созданной Усами. Тем не менее, он всегда возвращает NULL. У вас есть идеи, как я могу это исправить? (Я оставил комментарий в основном. 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);

};


});

1 Ответ

3 голосов
/ 10 марта 2020

Ваш слушатель для DOMContentLoaded срабатывает при первой загрузке страницы, и в этот момент html 1003 *

не обрабатывается *1007*. Вы можете получить ненулевое значение только после шаблон отображается, поэтому выполните все ваши логи c после рендеринга шаблона: 

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