SOLVED. I made changes to my code as shown below:
function init() {
//preloadImages();
getContent('events', 'events');
getContent('content', 'main');
}
function loadingScreen(start) {
var loadingSpan = document.getElementById('loading');
if (start == true) {
loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
}
else {
loadingSpan.innerHTML = '';
}
}
function getContent(what, where) {
if (what == 'content') {
loadingScreen(true);
var ranLoad = true;
}
var toSet = document.getElementById(what);
var location = "content/" + where + ".txt";
var request = new XMLHttpRequest;
request.open("GET", location, true);
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
toSet.innerHTML = request.responseText;
if (ranLoad==true){
loadingScreen(false);
}
}
}
request.send(null);
}
window.onload = init;
Abbreviated or in-depth - refer to the code and outcomes presented below.
So. I am constructing a compact webpage for a acquaintance, and chose to experiment with a method where content would be retrieved via XMLHttpRequest instead of being directly written on the page, then placed into the designated area using JavaScript every time users clicked on a different link. However, I encountered an obstacle. When designing the functions to obtain the content (setEvents and setContent), which involved creating a variable and calling getMarkup function to set the variable, executing the return statement resulted in undefined output. A similar thread approached this issue by recommending adding the innerHTML statement DIRECTLY within the getMarkup function, a solution I preferred not to adopt. Below depicts both the code snippet and its corresponding results:
Edit: Esailija proposed sharing only the code snippet. Though utilizing the image might have been simpler, here is the alternative:
function init() {
//preloadImages();
setEvents();
setContent('main');
}
function setEvents() {
var eventDiv = document.getElementById("events");
var eventContent = getMarkup("content/events.txt");
eventDiv.innerHTML = eventContent;
}
function setContent(which) {
loadingScreen('start');
var contentDiv = document.getElementById('content');
location_ = "content/" + which + 'txt';
//var contentContent = getMarkup('location');
//contentDiv.innerHTML = contentContent;
loadingScreen('stop');
}
function loadingScreen(action) {
var loadingSpan = document.getElementById('loading');
loadingSpan.innerHTML = "Test";
if (action == 'start') {
loadingSpan.innerHTML = '<p>Loading...<br><img src="images/loading.gif"></p>';
}
if (action == 'stop') {
loadingSpan.innerHTML = '';
}
}
function getMarkup(where) {
var filerequest = new XMLHttpRequest();
filerequest.open("GET", where, true);
filerequest.onreadystatechange = function() {
if (filerequest.readyState == 4 && filerequest.status == 200) {
var test = document.getElementById("events");
var reply = filerequest.responseText;
//Doesn't work
return reply;
//Works just fine
//test.innerHTML = reply;
}
};
filerequest.send(null);
}
window.onload = init;
Switching from innerHTML to return displays "Test TEST", while returning instead of using innerHTML shows "undefined". My aim is to avoid employing innerHTML altogether, so is there a workaround to make the return statement functional?