using variable in jquery script

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

Are you sure you linked to the external JS file before the inline <script> tag? — SeinopSys
– SeinopSys, Commented May 26, 2013 at 11:06
If you embedded those scripts in the head element or somewhere in body before the elements you are trying to select in your first external script are actually existing in the document, then your variables test and list will simple not reference any elements when you try to work with them in your later code that gets triggered onready. — C3roe
– C3roe, Commented May 26, 2013 at 11:54

Ionică Bizău · Accepted Answer · 2013-05-26 11:46:07Z

2

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.

answered May 26, 2013 at 11:46

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

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

1 Comment

Felix Kling Over a year ago

If that's the whole content of the script (test.js), then the variables are global.

Community · Accepted Answer · 2017-05-23 11:43:15Z

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.
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 = ...
});
```
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.

Use either type or language for all script tags:

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

You don't need type or language in HTML 5 but the rest is spot on. +1

Valerio Cicero · Accepted Answer · 2013-05-26 11:09:03Z

0

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!

answered May 26, 2013 at 11:09

Valerio Cicero

3474 silver badges13 bronze badges

2 Comments

Valerio Cicero Over a year ago

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

Felix Kling Over a year ago

The $( var ... ) part is invalid JavaScript. I assume you wanted to pass a function to $.

mehdi · Accepted Answer · 2013-05-26 11:17:15Z

0

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

edited May 26, 2013 at 11:17

answered May 26, 2013 at 11:09

mehdi

1,7552 gold badges15 silver badges21 bronze badges

3 Comments

jk jk Over a year ago

can i put those variable to external js?

jk jk Over a year ago

i already put jquery at first,but nothing works , i don't know why

mehdi Over a year ago

@jkjk : is your path /test.js is correct? see this in view source!

Collectives™ on Stack Overflow

using variable in jquery script

4 Answers 4

1 Comment

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related