CODEWITHSUNDEEP
javascriptjquery
weekapaug
weekapaug

Reputation: 332

jQuery using values from inside each function

The code I wrote below works, but the variables I named within the each function are not defined after the function completes.

jQuery.each($myObject, function(i, val) {
  ce = $(this).attr('class');
  if (i === 0) {
    step1complete = true;
    if (/incomplete/i.test(ce)) {
      var step1complete = false
    }
    console.log('step1' + step1complete);
  } else if (i === 1) {
    step2complete = true
    if (/incomplete/i.test(ce)) {
      var step2complete = false
    }
    console.log('step2' + step2complete);
  } else if (i === 2) {
    step3complete = true
    if (/incomplete/i.test(ce)) {
      var step3complete = false
    }
    console.log('step3' + step3complete);
  }
});

if (step1complete === true && step2complete == false && step3 == false) {
  console.log('Youre Just Starting Out I see');
} else {
  console.log('You got one step done now theres more!');
}

However, its saying the variables I set in the each function are not defined even though I see them in the console during the loop.

Upvotes: 1

Views: 71

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Don't use var as it will scope it inside the function that is enclosed. Instead, bring them out, just the var part.

var step1complete;
var step2complete;
var step3complete;
jQuery.each($myObject, function(i, val) {
  ce = $(this).attr('class');
  if (i === 0) {
    step1complete = true;
    if (/incomplete/i.test(ce)) {
      step1complete = false
    }
    console.log('step1' + step1complete);
  } else if (i === 1) {
    step2complete = true
    if (/incomplete/i.test(ce)) {
      step2complete = false
    }
    console.log('step2' + step2complete);
  } else if (i === 2) {
    step3complete = true
    if (/incomplete/i.test(ce)) {
      step3complete = false
    }
    console.log('step3' + step3complete);
  }
});

if (step1complete === true && step2complete == false && step3 == false) {
  console.log('Youre Just Starting Out I see');
} else {
  console.log('You got one step done now theres more!');
}

If you don't want to pollute the global scope, use an IIFE:

(function () {
  var step1complete;
  var step2complete;
  var step3complete;
  jQuery.each($myObject, function(i, val) {
    ce = $(this).attr('class');
    if (i === 0) {
      step1complete = true;
      if (/incomplete/i.test(ce)) {
        step1complete = false
      }
      console.log('step1' + step1complete);
    } else if (i === 1) {
      step2complete = true
      if (/incomplete/i.test(ce)) {
        step2complete = false
      }
      console.log('step2' + step2complete);
    } else if (i === 2) {
      step3complete = true
      if (/incomplete/i.test(ce)) {
        step3complete = false
      }
      console.log('step3' + step3complete);
    }
  });

  if (step1complete === true && step2complete == false && step3 == false) {
    console.log('Youre Just Starting Out I see');
  } else {
    console.log('You got one step done now theres more!');
  }
})();

Definition:

IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. It is a design pattern which is also known as Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

Upvotes: 1

Related Questions