Accessing javascript array from onclick function

Question

I am using jQuery and populating an array on document.ready.

In my page I have some elements with a click event. I defined that function outside of the document.ready function.

I can't seem to figure out how to access that array variable from within my onclick function.

To simplify, I would like something like this to work:

$(document).ready(function(){
  var artists = new Array();
  artists.push('item1');
  artists.push('item2');
});

function clickLink() {
  alert(artists[0]);
}

Read up on what var does. Why does this prevent artists from being accessed (much less, existing) in the other function? — user2864740
– user2864740, Commented Feb 20, 2017 at 19:19

Bulent Vural · Accepted Answer · 2017-02-20 19:16:04Z

3

Many ways, one of the easiest, move your click hander inside the .ready() function. And you need to bind it to the element there instead of inline attribute:

$(document).ready(function(){
  var artists = new Array();
  artists.push('item1');
  artists.push('item2');

  $('#idOfTheElement').click(function() {
    alert(artists[0]);
  });
});

answered Feb 20, 2017 at 19:16

Bulent Vural

2,7081 gold badge16 silver badges18 bronze badges

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

Comments

Álvaro Touzón · Accepted Answer · 2017-02-20 19:15:10Z

2

hi you lost scope of creation of array, so there is two ways to solve it

Put all in same scope:

    $(document).ready(function(){
      var artists = new Array();
      artists.push('item1');
      artists.push('item2');
    function clickLink() {
      alert(artists[0]);
    }
    });

Declare array as global:

var artists = new Array();
$(document).ready(function(){

      artists.push('item1');
      artists.push('item2');

    });
function clickLink() {
      alert(artists[0]);
    }

answered Feb 20, 2017 at 19:15

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

Comments

kind user · Accepted Answer · 2017-02-20 19:56:12Z

1

You have to declare the artists array outside the document.ready() function and bind the function with the click event.

var artists = new Array();

$(document).ready(function() {
  artists.push('item1');
  artists.push('item2');
});

$('button').click(function() {
  console.log(artists[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

edited Feb 20, 2017 at 19:56

answered Feb 20, 2017 at 19:16

kind user

42k8 gold badges69 silver badges78 bronze badges

Comments

Muhammad · Accepted Answer · 2017-02-20 20:02:45Z

0

A simple solution is to remove the var keyword when you declare the array variable, which will make the variable global and that is not recommended and another solution would be to declare your array outside the function so that it can be referenced from onclick function.

answered Feb 20, 2017 at 20:02

Muhammad

7,4245 gold badges50 silver badges58 bronze badges

Collectives™ on Stack Overflow

Accessing javascript array from onclick function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related