Using a mygame.js variable in index.html?


#1

Does anyone have any idea how to do this? None of the variables are defined apparently, although as far as I’m aware they are declared as global (which means any files in the directory should be able to utilize them)?

:confused:


#2

@CJW, I don’t know how much you already know about JS and HTML, so if I say something you already know, it’s because I’m just trying to be complete, which may be helpful to others as well.

You can use the mygame.js variables in your index.html file only after mygame.js is included into the index.html file, which is performed by this line of code in index.html:


<script src="mygame.js"></script>

After that, you can reference any variable that you’ve set in mygame.js by the name used in mygame.js to declare that variable. You can do this from inside a tag or a javascript: reference, such as in the href for an tag. If you’re referencing a stat, you’ll have to use the stats global variable to get at it.

For instance, say you have this in your mygame.js file:


stats = {
  debug: false
  ,strength: 50
  ,leadership: 50
};

Then after you include the mygame.js file in your index.html file, you can reference the stats variables in a script context in your index.html file as in the following example code, which might be used in an attempt to do some custom debugging, where perhaps you have a link on your index.html page that calls the following function, allowing you to toggle your custom debug mode and switch some stats around based on whether you are in your custom debug mode or not:


<script>
function mod4debug() {
  stats.debug = !stats.debug;
  if (stats.debug) {
    stats.strength = 60;
    stats.leadership = 40;
  } else {
    stats.strength = 50;
    stats.strength = 50;
  }
}
</script>

In a case like this, you’d probably be better off putting the above code in your mygame.js file, and then calling the mod4debug function where you needed it in the index.html file, such as when you click a link for toggling your custom debug mode. I don’t know your purposes for referencing mygame.js variables from inside index.html, but in any case I’d recommend putting any custom JS variables, functions or code in the mygame.js file or another .js file that you include into index.html, and use only minimal references to JS from the index.html file. But that’s just me. Hope this is of help.


#3

Thanks that helps a lot, I was just missing the “stats.” identifier :slight_smile:

I’m using it to if condition some buttons.
This is merely an example but say I wanted to have a “map” button, I wouldn’t want that to appear on index.html until the variable in mygame.js

has_map = true

But do you think there is a better way to do this?
I would be using quite a lot of ifs

I know basic coding theory, I understand globals, locals, variables, arrays, loops, what have you - but I’ve never really bothered to learn a language (programming or scripting). So I understand most stuff, I just can’t do it all from scratch (I don’t know the commands, etc).

Thanks for the help :slight_smile:

EDIT:

Just realized, that probably won’t actually work, as you’d need to refresh the index page to take affect, right? ;/


#4

You can do that sort of thing without placing any JS in your index.html file, and something like jQuery would make it very easy. You would set up your map in the index.html file—however and wherever you want it—but wrap it in a

tag with an id attribute of your choice. It would look something like this:

<div id='map' style='display: none;'>
...put your map button here...
</div>

This would cause the map button to be created, but not displayed on the web page (‘display: none;’). Then in mygame.js (or some other .js file that you include into index.html), you would write the code that clears the display style (‘display: “”;’), after the map button has been created, or after the document has finished loading. I can get you code for this later; I’d have to refresh my memory on what the syntax is. It would be super easy to do with jQuery, but I’d still have to look up the syntax for that. Are you (amenable to) using jQuery?


#5

Actually, for a button, I’d probably wrap it in a tag instead of a

tag, so the button could be placed inline with other input elements.


#6

if (stats.button1show == true) { document.getElementById("button1").style.display = "inline"; }
This is what I was using, and that works fine - but you’re right I could just stick that in mygame.js couldn’t I?

That’s good, that’s useful - Would jQuery help me trigger an event?
That’s what I need now something to actually trigger the if check/display the element without reloading the index.html page.

EDIT: Could I just wrap the if inside a function and call that via another (always visible) button?

Like a refresh button per-say, maybe not the best way to do it, but it’d suit my needs :slight_smile:


#7

@CJW, yeah, you could wrap that in a function, and then you could call that function from the “onload” attribute of the tag, and that should work for your purposes. If the function were called checkmap, your tag in the index.html file would look like:


<body onload="checkmap()">

Then you wouldn’t have to use jQuery or another button.


#8

Thanks, sadly… the onload attribute seems to prevent the pages from loading. :confused:


#9

Hmm. It works okay for me. Can you share exactly what you typed for the body tag and the javascript function?


#10

`

`

function load() { alert("Page is loaded"); }

Is the latest one I tried (tried a few) - The fuction calls, the box pops up but no matter what I call the loading gif doesn’t disappear and the .txt file *choice/text contents doesn’t appear.


#11

<body onload="load()">

You’re missing the quotes.


#12

But it’s weird if you were getting the alert box to pop up…


#13

Which browser are you using? I generally use Firefox, and that’s where it’s working for me.


#14

Google Chrome, I added the quotes. It still popped up but it still won’t load >_<’
Same thing with IE


#15

Yeah, I’m seeing a problem in IE, and Chrome says it won’t even run CS. This is why I like jQuery; it handles browser incompatibilities for you.


#16

The button approach works fine, so I’ll resort to that for now, thanks for your help (again) ^^


#17

Definitely sounds like your best bet for your purposes.