Azazel Azazel - 6 months ago 14
HTML Question

Load another JavaScript file and acess var

I'm doing a work for school, and I'm doing a online plataforn to buy games online, I can just use HTML, CSS and JS so for each game e have a JS file with the informations, here is an example:

/*doom.js*/
var info = {
title : "doom",
price : "59.99",
off : "0%"
};


And my html page is that one:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="games/functions.js"></script>

</head>
<body>
<label id="title"></label>
</body>
</html>


I have that page to all my games, so I use the GET method to know wich file I need to read. (game.html?id=doom)

I have this code to get the id chosed and load the file:

window.onload = function() {
id = getURLParameter('id');
loadGamefile("games/"+id+".js");
};

function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function loadGamefile(filename){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
    
    if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref);

loadinformation();
}

function loadinformation(){
document.getElementById("title").innerHTML = info.title; //info.title is from the doom.js file
}


The only problem is he dont change the label, but if I put a button on the btml code and onclick I say its the loadinformation() he load fine, but I want that automatic when the page loads and here is the error I get from console:
functions.js:22 Uncaught ReferenceError: info is not defined
, I think maybe is becouse the browser didn't had time to load the file, I don't know, can someone help me? Thanks and sorry for my english.

Answer

The problem is you aren't giving the browser a chance to parse your new script. You can give it a moment to do that using setTimeout.

function loadGamefile(filename) {
    // your other code goes here

    setTimeout(function() {
        loadinformation();
    }, 500); // wait half of a second
}

Ideally, you should have your data stored in a JSON file then load it using AJAX instead. There are numerous tutorials covering how to load JSON over AJAX.