Utilizing JavaScript For Loops for Code Repetition

Question

Utilizing JavaScript For Loops for Code Repetition

Apologies for the ambiguous question title - struggling to articulate this properly.

Essentially, I have some JavaScript code that I am looking to streamline by using a for loop.

$('.q1').keyup(function () {
    if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
        //Perform certain actions
    } else {
        //Do other things
    };
});

$('.q2').keyup(function () {
    if ($.inArray($(this).val().toLowerCase(), a2) > -1) {
        //Perform certain actions
    } else {
        //Do other things
    };
});

It is evident that the only difference between these two functions is the first class (either .q1 or .q2) and the array name (a1 or a2).

Up until now, I have accomplished the following...

for (var i=1; i<=8; i++) {
    $('.q'+i).keyup(function () {
        if ($.inArray($(this).val().toLowerCase(), a1) > -1) {
            //Perform certain actions
        } else {
            //Do other things
        };
    });
}

The issue with varying the array value on each iteration in order to cycle through a1, a2, a3, and so on remains unresolved.

Any assistance would be greatly appreciated. Thank you.

UPDATE

a1 and a2 correspond to arrays...

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

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

I have a distinct array for each quiz answer, housing all possible responses for every question.

javascript jquery arrays for-loop increment

Answer 1

Answer №1

For this type of problem, one commonly used data structure is arrays. They are more efficient for handling multiple variables in such scenarios.

Assuming you have an array called a, you can use the following code:

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]);
}

To initialize your array, you would do something like this:

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

Check out the demonstration here

Answer 2

For this type of problem, one commonly used data structure is arrays. They are more efficient for handling multiple variables in such scenarios.

Assuming you have an array called a, you can use the following code:

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]);
}

To initialize your array, you would do something like this:

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

Check out the demonstration here

Answer 3

Answer №2

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

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

into this:

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

Therefore,

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

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

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

Subsequently, the if statement would be:

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

Answer 4

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

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

into this:

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

Therefore,

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

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

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

Subsequently, the if statement would be:

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

Utilizing JavaScript For Loops for Code Repetition

Answer №1

Answer №2

Similar questions

Step-by-step guide on clipping a path from an image and adjusting the brightness of the remaining unclipped area

Exploring Typescript for Efficient Data Fetching

What could be causing my array to update when the method is called live but not during unit tests?

What causes the slash URL to behave differently than other URLs when running through the middleware of NodeJS?

Having trouble sending data to API with Node, Express, and vanilla JavaScript POST form

Showcasing the time variance using javascript/jquery

Having trouble with adding an event listener on scroll in React JS. Need assistance in resolving this issue

The eel feature results in no output

Is there a way to prevent the omission of zeros at the end in JavaScript when using Number.toString(2)?

What is the best way to verify multiple email addresses simultaneously?

The routing feature functions properly on localhost but encounters issues on the live server

What is the best way to efficiently import multiple variables from a separate file in Vue.JS?

Dynamically assigning column values based on object properties

Using Reactjs to create a custom content scroller in jQuery with a Reactjs twist

"Step-by-step guide on showcasing a specific blog post using its unique identifier in an Angular/Express/MongoDB application

I often struggle with creating social media buttons using Material UI

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

Are the two pieces of code distinct from each other in any way?

In what way can I incorporate additional functions or multiple functions within an Express route to modify database information?

display PHP JSON information using jQuery AJAX