在jquery脚本中使用变量

Question

i imported my script

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

and the content is

var test= $(document).find('aside#bar');
var list= test.find('ul');

then i using following script to append string

<script>
$(document).ready(function () {
  $(list).text("testing message");
});
</script>

but chrome console says Uncaught ReferenceError: list is not defined

how can i use variable in jquery?

Update

i discovered all script is not work in that page

i use

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="/test.js"></script>
    <script>

$(document).ready(function () {
  $(document).html("testing message");
});
    </script>

but nothing append,chrome console doesn't log anything

Answer 1

In your test.js file you declare a local variable. You have to declare it global using window.variableName like bellow:

window.test= $(document).find('aside#bar');
window.list= test.find('ul');

Then you will be able to access it from other Javascript files that were loaded after test.js.

Answer 2

1. Check if /test.js is being loaded in Chrome. I think the URL you are giving to this file might be wrong

    <script src="/test.js"> 

   Open Chrome's Network panel , and reload the page. Are you seeing a Red error message when the test.js script is trying to load?

   If this page is, say, http://localhost/test/mypage.html , then src='/test.js' will load http://localhost/test.js . Because of the / in the beginning. So check the URL path and see if the script is getting loaded first.

2. test.js script is just saying var test = ..., var list = ... . But at this point, the document may not even have loaded! But of course, if your script test.js got loaded properly - then it would have shown an error for the test and list variables itself. Since you're not seeing errors when this variables are getting set, my first guess is that test.js is not getting loaded. Fix the script loading first, and then fix the script itself:

    $(document).ready(function() { var test = ... var list = ... }); 

3. But again, this will also not work when you try to use test or list somewhere else! Because they are declared using var . var creates only local variables, so they won't be available outside the function (if you check above, we're wrapping the var test =..., var list = ... inside a function() { } , so they won't be available outside that function). So make them like:

    $(document).ready(function() { window.test = ... window.list = ... }); 

   You can also accomplish the same just by removing the var keyword, but that has its own problems. Make sure you read Javascript Variable Scopes for a start.

4. Use either type or language for all script tags:

    <script language="javascript" type="text/javascript"> $(document).ready(...) </script> 

Answer 3

just use list.html("test message") or list.text("test message")

$(document).ready(function () {
  list.html("testing message");
});

DEMO

EDIT:

and because of use jquery function in test.js

<script src="jquery.js"></script>  <= First
<script src="test.js"></script> <= Second

Answer 4

Why you don't define variables when the document is ready??

You can try in the script

$(
   var test= $(document).find('aside#bar');
   var list= test.find('ul');
);

and

<script>
$(document).ready(function () {
  $(list).text("testing message");
});
</script>

But I would do

$(
       var test= $(document).find('aside#bar');
       var list= test.find('ul');
       $(list).text("testing message");
    );

Finaly.... what is aside#bar ????

aside is a class?? You forget the dot?? .aside?? The problem maybe there.

Sorry for my bad english and hope this help! Bye!