I am facing an issue with a dynamic page that is populated by an ajax call. Here is the current code snippet:
function loadPage() {
var container = document.querySelector(".container");
var xhr = new XMLHttpRequest();
xhr.open('GET', ("data.html"), true);
xhr.addEventListener("load", function(){
container.innerHTML = xhr.response;
var noticeBar = document.querySelector("#noticeBar"); //this element is from data.html which was just loaded into the DOM.
});
xhr.send();
}
Whenever I try to do something like this:
function xyz(){
loadPage().
noticeBar.innerHTML = "bla bla bla"; //this doesn't work because the DOM hasn't fully loaded yet
}
I am in search of a solution to make this process synchronous.