CODEWITHSUNDEEP
jquery
Iwani Khalid
Iwani Khalid

Reputation: 303

Array showing undefined in if statement

I have a block of HTML markup that looks something like this for a Course. This is predefined by the CMS my client's using

<ul class="box-3036">
  <li aria-selected="true">
    <a href="#" id="ui-id-5">Dentistry</a>
  </li>
</ul>

I have a bunch of courses, here's another example of this HTML block for another course.

<ul class="box-3032">
  <li aria-selected="true">
    <a href="#" id="ui-id-7">Pharmacy</a>
  </li>
</ul>

I am trying to write a jQuery code for all these courses. From the HTML block, here are the unique info

Here's the jQuery code I have now. The problem I am facing is that the URL vars is giving me undefined value

box = [
  ".box-3036",
  ".box-3032"
];  

uiid = [
  "a#ui-id-5",
  "a#ui-id-7"
];  

urlfirst = [
  "http://www.yahoo.com",
  "http://www.gmail.com"
];

urlsecond = [
  "http://www.google.com",
  "http://www.7senarai.com "
];   



for (var i = 0; i < box.length; i++) {
        $(box[i] + " " + uiid[i]).click(function() {

      var pid = $(this).parent().attr("aria-selected");
      if(pid == "true") { 
        //window.open(urlfirst[i], '_blank');
        //window.location.href = urlsecond[i];
        alert(urlfirst[i]);
        alert(urlsecond[i]);

      }
    });

}

Here's my jsfiddle

Upvotes: 0

Views: 45

Answers (3)

Victory
Victory

Reputation: 5890

The issue is that the var i in the for loop's scope is above the function you pass to click, so you are getting the value of i AFTER the loop is finished which is 2 in this instance. You want the i to be scoped for your click function

 for (var i = 0; i < box.length; i++) {
    (function (i) {
            $(box[i] + " " + uiid[i]).click(function () {
          var pid = $(this).parent().attr("aria-selected");
          if(pid == "true") { 
            //window.open(urlfirst[i], '_blank');
            //window.location.href = urlsecond[i];
            alert(urlfirst[i]);
            alert(urlsecond[i]);

          }
        });
     })(i); // bring i into scope
 }

Upvotes: 1

PeterKA
PeterKA

Reputation: 24638

Use a closure around the content of the loop to preserve the value of i like so:

for (var i = 0; i < box.length; i++) {
     (function( i ) {
        $(box[i] + " " + uiid[i]).click(function() {

          var pid = $(this).parent().attr("aria-selected");
          if(pid == "true") { 
            //window.open(urlfirst[i], '_blank');
            //window.location.href = urlsecond[i];
            alert(urlfirst[i]);
            alert(urlsecond[i]);

          }
        });
    })( i );
}

DEMO

Upvotes: 1

Taplar
Taplar

Reputation: 24965

I would suggest you use a forEach rather than a for loop so the i is scoped for each binding.

box.forEach(function(aBox, i){
  $(aBox + " " + uiid[i]).click(function() {
    var pid = $(this).parent().attr("aria-selected");
    if (pid == "true") {
      //window.open(urlfirst[i], '_blank');
      //window.location.href = urlsecond[i];
      console.log(i);
      console.log(urlfirst[i]);
      console.log(urlsecond[i]);
    }
  });
});

Upvotes: 1

Related Questions