增量变量在我的函数中不起作用

Question

So i work with custom CMS and I need to modify a menu. I need to add element with onclick after every item in menu which would unpack child ul element to show subcategories. Anyway... this is my code.

var catEl = document.getElementsByClassName("standard first");
var parEl = document.getElementsByClassName("child first");
var catNumb = catEl.length;
var parNumb = parEl.length;
var catOrd = 0;
var parOrd = 0;

while (catOrd < catNumb) {
  var newNode = document.createElement('a');
  newNode.classList.add("opener");
  newNode.innerHTML="x";
  newNode.onclick = function() {
    if (!parEl[parOrd].classList.contains("open")) {
      parEl[parOrd].classList.add("open");
    }
    else {
      parEl[parOrd].classList.remove("open");
    }
  };

  catEl[catOrd].after(newNode);
  catOrd++;
  parOrd++;
}

There is one problem and I don't know how to solve it, or what is wrong with it. The part with

if (!parEl[parOrd].classList.contains("open")) {
      parEl[parOrd].classList.add("open");
    }
    else {
      parEl[parOrd].classList.remove("open");
    }

is incorrect in some way. Dev tools in Chrome say "Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLAnchorElement.newNode.onclick" If I substitute [parOrd] with a number, then it works.

I'm beginner in JS, what am I doing wrong?

Thanks!

UPDATED CODE:

<script>

var parEl = document.getElementsByClassName("child first");
var parNumb = parEl.length;
var parOrd = 0;

while (parOrd < parNumb) {
  var newNode = document.createElement('a');
  newNode.classList.add("opener");
  newNode.innerHTML="x";
  newNode.onclick = function() {
    // returns 4 - number of elements of parEl (0 1 2 3 + 1 more for parOrd++ because it increments once more before making while statement invalid)
    document.getElementById("log").innerHTML = parOrd;
    if (!parEl[parOrd].classList.contains("open")) {
      parEl[parOrd].classList.add("open");
    }
    else {
      parEl[parOrd].classList.remove("open");
    }
  };
  parEl[parOrd].after(newNode);
  parOrd++;
}

</script>

Answer 1

You perform no checks of parOrd in the while lopp, to see IF its in a valid range. I would log it to see why that happens. And if there are constraints on that number, make sure to check them beforehand.