Why is variable undefined when the function is called again

Question

looks like a scope issue I can't get my head around not sure why the variable links is undefined when the function is called twice

<table class="list" border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr class="headerRow">
      <th scope="col" class="numericalColumn zen-deemphasize">Display Order</th>
      <th scope="col" class=" zen-deemphasize">Message</th>
      <th scope="col" class=" zen-deemphasize">Description</th>
      <th scope="col" class=" zen-deemphasize">Media File Name</th>
      <th scope="col" class="zen-deemphasize ">Location</th>
      <th scope="col" class="zen-deemphasize ">Status</th>
      <th scope="col" class=" zen-deemphasize">data</th>
    </tr>


    <tr class="dataRow">
      <th scope="row" class="dataCell">
        1
      </th>
      <td scope="row" class=" dataCell">
        <a href="#">Homepage</a>
        <div class="mouseOverInfoOuter" tabindex="0">

        </div>
      </td>
      <td class="dataCell">
        Homepage
      </td>
      <td class="dataCell">
        <a href="http://test.com/test/zip1" class="zipUrl">
          test1.zip
        </a>
      </td>
      <td scope="row" class="dataCell">
        test1.zip
      </td>
      <td scope="row" class="dataCell">
        Content Server
      </td>
      <td scope="row" class="dataCell">
        Available for download
      </td>
      <td scope="row" class="dataCell">
        File not available.
      </td>
      <td scope="row" class="dataCell">

      </td>
      <td class=" dataCell ">
        <a href="#"></a>
      </td>
    </tr>

    <tr class="dataRow">
      <th scope="row" class="dataCell">
        2
      </th>
      <td scope="row" class=" dataCell">
        <a href="#">contact</a>
        <div class="mouseOverInfoOuter" tabindex="0">  </div>
      </td>
      <td class="dataCell">
        contact
      </td>
      <td class="dataCell">
        <a href="http://test.com/test/zip2" class="zipUrl">
          test2.zip
        </a>
      </td>
      <td scope="row" class="dataCell">
        test2.zip
      </td>
      <td scope="row" class="dataCell">
        Content Server
      </td>
      <td scope="row" class="dataCell">
        Available for download
      </td>
      <td scope="row" class="dataCell">
        File not available.
      </td>
      <td scope="row" class="dataCell">

      </td>
      <td class=" dataCell ">
        <a href="#"></a>
      </td>
    </tr>

    <tr class="dataRow">
      <th scope="row" class="dataCell">
        2
      </th>
      <td scope="row" class=" dataCell">
        <a href="#"> blog</a>
        <div class="mouseOverInfoOuter" tabindex="0"></div>
      </td>
      <td class="dataCell">
        blog
      </td>
      <td class="dataCell">
        <a href="http://test.com/test/zip3" class="zipUrl">
          test3.zip
        </a>
      </td>
      <td scope="row" class="dataCell">
        test3.zip
      </td>
      <td scope="row" class="dataCell">
        Content Server
      </td>
      <td scope="row" class="dataCell">
        Available for download
      </td>
      <td scope="row" class="dataCell">
        File not available.
      </td>
      <td scope="row" class="dataCell"></td>
      <td class=" dataCell ">
        <a href="#"></a>
      </td>
    </tr>

  </tbody>
</table>


<script>

    (function init() {

        var tableRow = document.querySelectorAll('.dataRow');
        var links = $('.dataCell:nth-child(4) .zipUrl');

        if (tableRow.length === 0) return;

        var index = 0;

        function click() {

            if (index < tableRow.length) {
              //comment out line 14 to see console.log working normally
              $(links[index++]).click();
              console.log('Clicked on... ' + links[index++])
              click();

            }

        }
        click();

      }());

</script>

Example

http://jsfiddle.net/Grundizer/6p60bkg9/

I'm trying to click on every link which is in the Media File Name column of the table, I don't have access to the source code to add or remove css classes, I have to work with the markup produced by the server.

Answer 1

Main problem was, index was incrementing two times one at $(links[index++]).click(); and another at console.log('Clicked on... ' + links[index++]); second time incrementation points at a null array element.

Do this->

$(window).load(function(){

    var tableRow = document.querySelectorAll('.dataRow');
    var links = $('.dataCell:nth-child(4) .zipUrl');

    if (tableRow.length === 0) return;

    var index = 0;

    function click() {

        if (index < tableRow.length) {
          //comment out line 14 to see console.log working normally
          $(links[index++]).click();
          console.log('Clicked on... ' + links[index]);
          click();

        }

    }
    click();

  }
);//]]> 

by the way, there was some syntactical error, I fixed it in the solution code.