JavaScript For Loop to Repeat Code

Question

Sorry for the vague question title - unsure how to word this.

Basically, I have the following JavaScript that I want to condense using a for loop.

$('.q1').keyup(function () {
    if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
        //Stuff
    } else {
        //Other stuff
    };
});

$('.q2').keyup(function () {
    if ($.inArray($(this).val().toLowerCase(), a2) > -1) {
        //Stuff
    } else {
        //Other stuff
    };
});

You can see that the only change between these two functions is the first class (either .q1 or .q2) and the array name (either a1 or a2). So far, I have done the following...

for (var i=1; i<=8; i++) {
    $('.q'+i).keyup(function () {
        if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
            //Stuff
        } else {
            //Other stuff
        };
    });
}

You can see that the first class issue has been solved with the incrementing i variable, but I am unsure how I can make the array value change on each loop so that it goes a1, a2, a3, a4 etc.

Any help would be much appreciated. Thank you.

EDIT

The a1 and a2 refers to arrays...

var a1 = new Array();
a1[0] = "egypt";

var a2 = new Array();
a2[0] = "brasil";
a2[1] = "brazil";

I have an array for each answer to a quiz. In each array are the possible answers to each question.

Why bother looping through elements when you can just add a single class to all the elements and hang the keyup event off that? — Rory McCrossan
– Rory McCrossan, Commented Nov 6, 2013 at 10:10
Your variables a1, a2 seem to be logically connected – same data structure, I assume, because otherwise you wouldn’t perform the same actions on them? Then don’t use individual variables with numbers in their names (which in 99.999…% of cases indicates that you’re doing it wrong) – but use an array as data structure for this data as well! — C3roe
– C3roe, Commented Nov 6, 2013 at 10:11
a1 and a2 are two separate arrays. Please see the edit to my question. — user2586455
– user2586455, Commented Nov 6, 2013 at 10:21

Denys Séguret · Accepted Answer · 2013-11-06 10:42:13Z

3

There's a data structure commonly used for that type of problems : arrays. They're much more suited to your problem than having a bunch of variables.

Supposing you have an array a, you can do

for (var i=1; i<=8; i++) {
  (function(answers){
    $('.q'+i).keyup(function () {
        if ($.inArray($(this).val().toLowerCase(), answers) > -1) {
            $('#r').text('ok');
        } else {
            $('#r').text('not ok');
        };
    });
  })(a[i-1]);
}

Your array would be initialized like this :

var a = [];
a.push([
   "egypt"
]);
a.push([
   "brasil",
   "brazil"
]);

Demonstration

edited Nov 6, 2013 at 10:42

answered Nov 6, 2013 at 10:11

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

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

7 Comments

user2586455 Over a year ago

Please see my edit to the original question. I have multiple arrays to hold the acceptable answers for each question in a quiz.

Denys Séguret Over a year ago

@user2586455 I edited to show how the array a could be created, is that clearer ?

Chris Charles Over a year ago

So you need an array or arrays. Simple really

Denys Séguret Over a year ago

In fact, in most cases, what you really need is probably an array of objects containing both the possible answers and the questions (and other stuff), so that you don't share the data between the HTML and the JavaScript but a first step could be an array of arrays.

user2586455 Over a year ago

This doesn't seem to be working. If I type 'egypt' into the first input field (.q1) it returns false.

|

Chris Charles · Accepted Answer · 2013-11-06 10:34:32Z

0

Change this: var a1 = new Array(); a1[0] = "egypt";

var a2 = new Array();
a2[0] = "brasil";
a2[1] = "brazil";

to this:

var a = new Array();
a.push(["egypt"]);
a.push(["brasil","brazil"]);

So that

a[0][0] == a0[0] == "egypt"

a[1][0] == a1[0] == "brasil"

a[1][1] == a1[1] == "brazil"

Then the if statement becomes:

for (var i=1; i<=8; i++) {
    $('.q'+i).keyup(function () {
        if ($.inArray($(this).val().toLowerCase(), a[i-1]) > -1) {
            //Stuff
        } else {
           //Other stuff
        };
   });
}

edited Nov 6, 2013 at 10:34

answered Nov 6, 2013 at 10:24

Chris Charles

4,44620 silver badges31 bronze badges

1 Comment

user2586455 Over a year ago

Can you explain how I would need to edit the if statement with this updated array format?

Collectives™ on Stack Overflow

JavaScript For Loop to Repeat Code

2 Answers 2

7 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Related