Access array inside Jquery using for loop

Question

Hi guys I am trying to loop through 2 arrays , one array handles button Ids , the other handles the text. However it does not seem to be able to iterate through the text array. When I try to window.alert the value , it returns undefined.

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
    $(buttonIdArray[i]).click(function() {
      window.alert(textArray[i])
    })
  }
}
<button id ='one'>one</button>
<button id ='two'>two</button>

i is being hoisted outside of the for loop - and when that loop actually ends, i is being set to 2 - nothing exists at textArray[2] — tymeJV
– tymeJV, Commented Apr 2, 2018 at 19:39

Thomas Brd · Accepted Answer · 2018-04-02 19:49:24Z

2

Because of the different scope in the .click() context you need to get your text from textArray before, like this:

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
    const text = textArray[i]
    $(buttonIdArray[i]).click(function() {
      window.alert(text)
    })
  }
}

buttonDetails()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='one'>one</button>
<button id='two'>two</button>

answered Apr 2, 2018 at 19:49

Thomas Brd

1,2739 silver badges11 bronze badges

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

1 Comment

James Over a year ago

Cheers! Also it looks like declaring the iteration value as a "const" , instead of a "var" makes a big difference too

yajiv · Accepted Answer · 2018-04-02 19:44:22Z

0

You can use index() of jQuery.(like below)

var buttonIdArray = ['#one','#two'];
var textArray=['this is button one','this is button two'];

for (var i =0; i<buttonIdArray.length;i++)
{
  $(buttonIdArray[i]).click(function(){
    console.log(textArray[$(this).index()-1]);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id ='one'>1</button>
<button id ='two'>2</button>

answered Apr 2, 2018 at 19:44

yajiv

2,9492 gold badges17 silver badges25 bronze badges

Comments

Kylie · Accepted Answer · 2018-04-02 19:51:07Z

This is how I would do it.

 var textArray=["this is button 1","this is button 2"];

 $('.myButtons').click(function(){
    var index = $(this).index();
    alert(textArray[index]);
 });


<button class='myButtons' id="one">
Button 1
</button>
<button class='myButtons' id="two">
Button2
</button>

JS fiddle here

Or like this...

$('.myButtons').click(function(){
  alert($(this).data('text'));
});

<button class='myButtons' id="one" data-text="this is my text">
Button 1
</button>
<button class='myButtons' id="two"  data-text="this is my text 2">
Button2
</button>

Or like this...

var buttonArray =[
  {id:'#one',text:"this is button1"},
  {id:'#two',text:"this is button2"}
];



for (var i = 0; i < buttonArray.length; i++) {
  var index = i;
  $(buttonArray[index].id).click(function() {
    alert(buttonArray[index].text);
  });
}

Js Fiddle 2

Or Like this...

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
  for (var i = 0; i < buttonIdArray.length; i++) {
   var text = textArray[i]
   $(buttonIdArray[i]).click(function() {
     window.alert(text)
   })
  }
}

buttonDetails()

ndmeiri · Accepted Answer · 2018-04-02 19:56:38Z

0

There is probably a better way to do it than this, but this is how I solved your issue.

var buttonIdArray = ['#one', '#two']
var textArray = ['this is button one', 'this is button two']

function buttonDetails() {
    for (var i = 0; i < buttonIdArray.length; i++) {
        $(buttonIdArray[i]).attr('textArrayIndex', i)
    }
}
$('button').click( function() {
    window.alert(textArray[$(this).attr('textArrayIndex')]);
})
buttonDetails();

Basically, you can't have an event listener within a loop. It doesn't work.

JSFiddle

edited Apr 2, 2018 at 19:56

ndmeiri

5,03912 gold badges39 silver badges47 bronze badges

answered Apr 2, 2018 at 19:51

Kieran Holroyd

11 bronze badge

Collectives™ on Stack Overflow

Access array inside Jquery using for loop

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related