Load another JavaScript file and access var

Question

I'm doing a work for school, and I'm doing a online platform to buy games online, I can just use HTML, CSS and JS so for each game abd have a JS file with the information, 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 which file I need to read. (game.html?id=doom)

I have this code to get the id chosen 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 it doesn't change the label, but if I put a button on the html code and onclick I say its the loadinformation() it loads fine, but I want that automatically 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 because the browser didn't have time to load the file, I don't know, can someone help me? Thanks and sorry for my English.

Mike Cluck · Accepted Answer · 2016-05-23 18:04:29Z

2

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.

As @Bergi pointed out, this solution is very fragile and relies on the script loading in under 500ms. Instead, you can listen for the load event to ensure you use the script as soon as it's ready.

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);

    // Wait for the script to load
    fileref.onload = function() {
        loadinformation();
    };
}

edited May 23, 2016 at 18:04

answered May 23, 2016 at 17:30

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user4973056 Over a year ago

thanks but I just can use HTML CSS and JS, I'll try that.

user4973056 Over a year ago

I tried that code but it didn't work anyway. Do you know another trick? I realy want put that to work

user4973056 Over a year ago

Sorry but actualy works, I just callend in the wrong spot, thanks so much for the help.

Bergi Over a year ago

What if the file doesn't load in 500ms? That approach is so fragile. Why not use a proper onload handler?

Mike Cluck Over a year ago

@Bergi You're right, onload would be much better. I'll update the answer to better reflect that.

|

Collectives™ on Stack Overflow

Load another JavaScript file and access var

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related