error occurred: reference for index of array with javascript

Question

I want to sort and move 2 svg rects, 2 texts at same time.

So i create 2 arrays for svg rects, texts:

var numbers = [24, 19, 38, 41, 55, 67];
var rects = [];
var texts = [];

function createRect() {
  for(var i=0; i<6; i++) {
  var rect = document.createElementNS(NS, 'rect'); 
  rect.setAttributeNS(null, 'id', "srect"+i); 
  rect.setAttributeNS(null, 'fill', '#5CD1E5');
  rect.setAttributeNS(null, 'x', x); 
  rect.setAttributeNS(null, 'y', y);
  rect.setAttributeNS(null, 'height', '80');
  rect.setAttributeNS(null, 'width', '80');
  rect.setAttributeNS(null, 'stroke', 'white');
  document.getElementById('svgOne').appendChild(rect);
  }
}

function createText() {
  //create 6 svg texts
  //same way 
}

function sortActionRect() {
  var counter = 0;
  var swapped = false;
  do {
    for (var k = 0; k < numbers.length - 1; k++) {
      for (var j = 0; j < numbers.length - 1; j++) {
        //to emphasize for selected two svg rects 
        $('#' + rects[j].id).attr('fill', '#0054FF');
        $('#' + rects[j + 1].id).attr('fill', '#FFA7A7');
        setTimeout(function() {
          document.getElementById('svgOne').appendChild(rects[j]);
          document.getElementById('svgOne').appendChild(rects[j + 1]);
          document.getElementById('svgOne').appendChild(texts[j]);
          document.getElementById('svgOne').appendChild(texts[j + 1]);
        }, 2000);
        //move up to svg rect, text
        $('#' + rects[j].id).attr('y', '50px');
        $('#' + rects[j + 1].id).attr('y', '50px');
        $('#' + texts[j].id).attr('y', '100px');
        $('#' + texts[j + 1].id).attr('y', '100px');
        setTimeout(function() {
          document.getElementById('svgOne').appendChild(rects[j]);
          document.getElementById('svgOne').appendChild(rects[j + 1]);
          document.getElementById('svgOne').appendChild(texts[j]);
          document.getElementById('svgOne').appendChild(texts[j + 1]);
        }, 2100);
        if (Number(numbers[j]) > Number(numbers[j + 1])) { //sort
          var temp = numbers[j];
          numbers[j] = numbers[j + 1];
          numbers[j + 1] = temp;
          var d1 = texts[j].childNodes[0];
          var d2 = texts[j + 1].childNodes[0];
          d1.nodeValue = numbers[j];
          d2.nodeValue = numbers[j + 1];
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#FFA7A7');
            $('#' + rects[j + 1].id).attr('fill', '#0054FF');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 3000);
          //move down svgs
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#5CD1E5');
            $('#' + rects[j + 1].id).attr('fill', '#5CD1E5');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
          }, 3100);
          setTimeout(function() {
            $('#' + texts[j].id).attr('y', '250px');
            $('#' + texts[j + 1].id).attr('y', '250px');
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 2200);
        } //if
        else {
          //move down svgs 
          setTimeout(function() {
            $('#' + rects[j].id).attr('fill', '#5CD1E5');
            $('#' + rects[j + 1].id).attr('fill', '#5CD1E5');
            document.getElementById('svgOne').appendChild(rects[j]);
            document.getElementById('svgOne').appendChild(rects[j + 1]);
          }, 3200);
          setTimeout(function() {
            $('#' + texts[j].id).attr('y', '250px');
            $('#' + texts[j + 1].id).attr('y', '250px');
            document.getElementById('svgOne').appendChild(texts[j]);
            document.getElementById('svgOne').appendChild(texts[j + 1]);
          }, 2300);
        } //else  
      } //for
      counter++;
      if (counter == 5) {
        swapped = true;
      }
    } //for 
  } while (swapped == false);
}

I used console.log() but 2 errors occurred.

One is:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

And the other is:

Uncaught TypeError: Cannot read property 'id' of undefined

Those two errors mostly occurred at using [j+1] .

How can i the method working well?

Answer 1

Try adding = to your variables

var numbers = [24, 19, 38, 41, 55, 67];
var rects = [];
var texts = [];

rects and texts can't be defined without a = I think?