使用观察者来检测元素何时出现

Question

Hi,

I want to get the text from an element that wont appear in the DOM until the user hovers another element so I added an observer but I still get an error that says TypeError: document.getElementById(...) is null.

This is my code:

document.addEventListener("DOMContentLoaded", function(event) {
// Select the node that will be observed for mutations
var parentOfMyList = document.body;

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            var lists = document.getElementById("list").textContent;
            console.log(lists)
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
observer.observe(parentOfMyList, config);   
});

What am I doing wrong?

Thank you.

Answer 1

Check whether the element exists before trying to use it.

 document.addEventListener("DOMContentLoaded", function(event) { // Select the node that will be observed for mutations var parentOfMyList = document.body; // Options for the observer (which mutations to observe) var config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed var callback = function(mutationsList) { for (var mutation of mutationsList) { if (mutation.type == 'childList') { var elt = document.getElementById("list"); if (elt) { var lists = elt.textContent; alert(lists); } } } }; // Create an observer instance linked to the callback function var observer = new MutationObserver(callback); observer.observe(parentOfMyList, config); var container = document.querySelector("#container"); document.querySelector("#b1").addEventListener("click", function() { var l = document.createElement("div"); l.id = "list"; l.textContent = "This is the list"; container.appendChild(l); }); document.querySelector("#b2").addEventListener("click", function() { var l = document.createElement("div"); l.id = "list2"; l.textContent = "This is list #2"; container.appendChild(l); }); }); 

 #container { height: 50px; width: 100%; background-color: yellow; } #list1 { background-color: green; } #list2 { background-color: pink; } 

 <div id="container"></div> <button id="b1">Click to create list</button> <br> <button id="b2">Click to create list2</button>