Question

I’m working on an HTML5 implementation of a game idea I’m playing with. Part of this, naturally, is storing the content, among which is the data for different abilities in the game, as well as characters and such.

While dynamic content, such as specific characters, will be moved later on, I will probably stick to XML for static content, such as stats for abilities and gear, which means I’d prefer fixing the issues I’m having with XML as soon as possible.

Now, to do this, I’m loading in XML documents at the beginning of a combat phase, first the character, then the abilities etc relevant to this character.

To do this, I have a “loadXMLFile” function, that takes a filename:

var loadXMLFile = function(filename) {
  req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    return req.responseXML;
  }
  req.open("GET", filename, true);
  req.send();
}

An example of loading and manipulating the data:

function Character(id) {
  doc = loadXMLFile("characters.xml");
  characters = doc.getElementsByTagName("Character");

My intention with this was to make the function call wait for the return value before continuing. As you may be able to tell from the title of the question, this does not work. Instead, as soon as I attempt to manipulate the data, the third line in the example, I receive the following runtime error: Uncaught TypeError: Cannot call method ‘getElementsByTagName’ of undefined

As the example shows, I load these XML files in my constructors, using the XML file to populate the class. Hence, a structure of calling a different function inside the readystatechange event handler is less than preferable. Am I forced to repeat the XML loading code everywhere I do this, just to make separate event handlers?

Answer 1

I would suggest to use jQuery or another javascript framework. It’s much easier to handle problems like this and you will save a lot of time and code lines. Another problem is the cross-browser compatibility which is not given in your code.