javascript - Call variable from another script in HTML - Stack Overflow

admin管理员组

文章数量:1426038

I currently have a HTML file that has one script that is declared as follows:

<script src="//ajax.googleapis/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">                         
 $(document).ready(function() {                           
    code.......
    var a = "hello"
});                                             
  </script>              

I am trying to add another script within the HTML file that will call on this variable "a". Right now, I am doing something like this:

<script type="text/javascript">                               
    alert(a);                                                              
</script>

But it is not alerting anything. If I replace a with a string like "hello", I do get alerted. Am I calling the variable wrong? I've tried searching for solutions but all of them say you should be able to easily call variables from another script assuming that script is declared and initialized before. Thanks.

I currently have a HTML file that has one script that is declared as follows:

<script src="//ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">                         
 $(document).ready(function() {                           
    code.......
    var a = "hello"
});                                             
  </script>              

I am trying to add another script within the HTML file that will call on this variable "a". Right now, I am doing something like this:

<script type="text/javascript">                               
    alert(a);                                                              
</script>

But it is not alerting anything. If I replace a with a string like "hello", I do get alerted. Am I calling the variable wrong? I've tried searching for solutions but all of them say you should be able to easily call variables from another script assuming that script is declared and initialized before. Thanks.

• javascript
• jquery
• html
• variables
• call

Share Improve this question Follow asked Jul 22, 2015 at 17:15 trynacodetrynacode 37111 gold badge99 silver badges1818 bronze badges 3

• your alert() code runs IMMEDIATELY when that <script> block is encountered. the other stuff will only run AFTER the entire document has been parsed/set up, so basically you're alerting BEFORE the variable ever has a chance to get defined. – Marc B Commented Jul 22, 2015 at 17:18
• Is it alerting nothing, or is it not alerting at all? – yaakov Commented Jul 22, 2015 at 17:26
• Hi Marc, that makes sense. I'll try making a quick fix. It was not alerting at all yak. – trynacode Commented Jul 22, 2015 at 17:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Move the a declaration outside of the function.

E.g.,

var a;

$(document).ready(function() {                           
    code.......
    a = "hello"
}); 

And then later on...

alert(a);

Remember that variables are function-scoped, so if you define it inside of a function, it won't be visible outside of the function.

---

Update based on ments:

Because you now have a timing issue when trying to interact with the a variable, I would remend introducing an event-bus (or some other mechanism) to coordinate on timing. Given that you're already using jQuery, you can create a simple bus as follows:

var bus = $({});

bus.on('some-event', function() {});
bus.trigger('some-event', ...);

This actually lends itself to some better code organization, too, since now you really only need the bus to be global, and you can pass data around in events, rather than a bunch of other random variables.

E.g.,

var bus = $({});

$(document).ready(function() {                           
    var a = 'hello';
    bus.trigger('some-event', { a: a });
}); 

And then in your other file:

bus.on('some-event', function(e, data) {
    alert(data.a);
});

JSBin example (obviously not spread across multiple files, but the same principles apply).

Replace your code as

<script src="//ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript"> 
    var a="";                        
    $(document).ready(function() {                           
        a = "hello";      
    });                                             
</script> 

Now you can access the variable a as below.

<script type="text/javascript">                               
    alert(a);                                                              
</script>

The problem with your code was that, you was declaring the variable a inside $(document).ready() which made it local to the ready().

When you write a inside function block you make it a local variable, you can move variable declaration outside of the function block as other answer say or you can use:

$(document).ready(function() {                           
    window.a = "hello";
});

and later:

alert(a);

In both cases you are declaring a as a global variable and that is not remended.

本文标签： javascriptCall variable from another script in HTMLStack Overflow