Pass variable to external javascript?

Question

I have a plugin which shows posts from a certain city:

<div id='banner-root' style="height: 50px; width: 385px;"></div>
<script src="http://lujanventas.com/plugins/banner.js" type="text/javascript"></script>

I need to pass the cityID to the external javascript. I'm already getting height and width on the external .js by simply checking the banner-root element.

How do I pass the and ID? Also it would be nice if it was clear that you are passing the cityID

• j08691: How are you passing the width and height?
• lisovaccaro: I get it by checking the div's height and width. What happens if I add an attribute to the script like 'city'. Can I get that with js?
• j08691: I don't know. I've read your question three times and I can't make heads or tails of it.

Answer 1

You don't really pass the width and height to the script according to your comments.. you can use the same style with cityId like so:

<div id='banner-root' style="height: 50px; width: 385px;" data-cityId="32"></div>

You can then retrieve it with

document.getElementById("banner-root").getAttribute("data-cityId");

Answer 2

When I had to do so, I used this:

<script type="text/javascript">var cityID = x;</script>
<script src="http://lujanventas.com/plugins/banner.js" type="text/javascript"></script>

Then I can access cityID in the banner.js script

EDIT

One of Javascript flaws are - everything by default is in global scope.

This means in the example above cityID is devined in global namespace - window. This is great for example when I want to reach this value from banner.js but bad by design as missed var statement in function body can overwrite global variable.