title: Different result when put outside of event listener?
body: <p>Sorry I am bad at asking questions, if you don't understand what I am asking please let me know</p>
  <pre><code>let node = this.createSvgNode(&quot;rect&quot;, {
      'data-id': section.id || '',
      x: section.x,
      y: section.y,
      width: section.width,
      height: section.height,
      fill: section.backgroundColor || &quot;#EEEEEE&quot;
  });
  
  let thisObject = this; 
  
  let paths = thisObject.findPaths(7, 3)  // Doesn't work
  
  node.addEventListener(&quot;click&quot;, function (e) {
      let paths = thisObject.findPaths(7, 3)  // works
  });
  </code></pre>
  <p>I don't understand why <code>let paths = thisObject.findPaths(7, 3)</code> works when it is inside the event listener and doesn't when it is outside of the event listener. isn't it the same?</p>
  <p>btw this is the findPaths function:</p>
  <pre><code>findPaths: function (startId, endId) {
  let paths = [];
  let startDoors = doors[startId];
  let endDoors   = doors[endId];
      
  for (let i = 0; i &lt; startDoors.length; i++) {
      let startingPoint = this.findPointByCoordinates(startDoors[i]);
      // console.log(&quot;Starting Point: &quot; + JSON.stringify(startingPoint));
  
      for (let j = 0; j &lt; doors[endId].length; j++) {
          let endingPoint = this.findPointByCoordinates(endDoors[j]);
          // console.log(&quot;Ending Point: &quot; + JSON.stringify(endingPoint));
  
          let potentialPath = this.recursiveIterationOfPoints([startingPoint], endingPoint);
  
          // console.log(potentialPath);
  
          paths = paths.concat(potentialPath);
      }
  }
  
  for (let id in paths) {
      paths[id] = this.linkRoomsWithPath(paths[id], startId, endId);
  }
  
  return paths;
  },
  </code></pre>
  <p>I get this error when I put <code>let paths = thisObject.findPaths(7, 3)</code> above the event listener:</p>
  <pre><code>Uncaught TypeError: Cannot read property 'length' of undefined
  </code></pre>
  <p>here is the full code</p>
  <pre><code>(function (global) {
  var IndoorMaps = function (options) {
      return new IndoorMaps.init(options);
  };
  
  let svgRootNode;
  let doors = {};
  let hallwayPoints = {};
  
  let currentZIndex = 0;
  let validZIndexes = [0];
  let showHallwayPoints = false;
  
  //let svgDimensions = {};
  
  let floorPlan = [];
  
  let mapSelection = null;
  
  IndoorMaps.init = function (options) {
      this.parseConfiguration(options || {});
      this.parseFloorPlan(options.floorSections || {});
      this.parseHallwayPoints(options.hallway || {});
  
      //svgDimensions = this.calculateSVGWidthAndHeight();
  
      svgRootNode = this.createSvgNode(&quot;svg&quot;, {
          width: '100%',
          height: '100%'
      });
  
      this.appendToBody(svgRootNode);
  
      // Render the Map
      this.drawMap(floorPlan[currentZIndex] || {});
  
      if (showHallwayPoints) {
          this.displayHallwayPoints(options.hallway || {});
      }
  
      return svgRootNode;
  };
  
  IndoorMaps.init.prototype = {
      createSvgNode: function (elementName, attributes = {}, value) {
          if (elementName === undefined) {
              throw &quot;Element name not found!&quot;;
          }
  
          let node = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, elementName);
  
          for (let attributeKey in attributes) {
              node.setAttribute(attributeKey, attributes[attributeKey]);
          }
  
          if (value !== undefined) {
              node.innerHTML = value;
          }
  
          return node;
      },
      appendToBody: function (node) {
          window.document.body.appendChild(node);
      },
      draw: function (node) {
          let panZoom = svgRootNode.querySelector('.svg-pan-zoom_viewport');
  
          if (!panZoom) {
              svgRootNode.append(node);
          } else {
              panZoom.append(node);
          }
      },
      addDoors: function(roomId, doorPoints) {
          doors[roomId] = doorPoints;
  
          for (let i = 0; i &lt; doorPoints.length; i++) {
              let coordinates = doorPoints[i];
  
              let attributes = {
                  x: coordinates.x,
                  y: coordinates.y,
                  width: coordinates.width || 0,
                  height: coordinates.height || 0,
                  fill: &quot;#FF0000&quot;
              };
  
              if (coordinates.width &gt; coordinates.height) {
                  attributes.x -= coordinates.width / 2;
                  attributes.y -= coordinates.height;
              }
  
              if (coordinates.height &gt; coordinates.width) {
                  attributes.x -= coordinates.width;
                  attributes.y -= coordinates.height / 2;
              }
  
              let rect = this.createSvgNode(&quot;rect&quot;, attributes);
  
              this.draw(rect);
          }
      },
      drawMap: function (floorSections) {
          for (let i = 0; i &lt; floorSections.length; i++) {
              let section = floorSections[i];
  
              if (
                  section.x === undefined
                  || section.y === undefined
                  || section.width === undefined
                  || section.height === undefined
              ) {
                  throw &quot;The x,y coordinates and the width and height are required fields.&quot;;
              }
  
              let node = this.createSvgNode(&quot;rect&quot;, {
                  'data-id': section.id || '',
                  x: section.x,
                  y: section.y,
                  width: section.width,
                  height: section.height,
                  fill: section.backgroundColor || &quot;#EEEEEE&quot;
              });
  
              let thisObject = this;
  
              node.addEventListener(&quot;click&quot;, function (e) {
                  if (mapSelection === null) {
                      thisObject.removeRouteIndicators();
                      mapSelection = this;
                      this.classList.add('selected');
                  } else {
                      console.log(mapSelection.dataset.id + &quot; : &quot; + this.dataset.id);
                      let paths = thisObject.findPaths(mapSelection.dataset.id, this.dataset.id);
  
                      let shortestPath = thisObject.findShortestPath(paths);
  
                      thisObject.drawPath(shortestPath);
  
                      mapSelection = null;
                      this.classList.add('destination');
                  }
              });
  
              this.draw(node);
              this.addDoors(section.id, section.doors);
  
              if (section.label === undefined) {
                  continue;
              }
  
              if (section.label.text === undefined) {
                  throw &quot;The text must be included for the label to be shown. Set label as null if you do not wish to display a label.&quot;;
              }
  
              xCoordinate = section.x + (section.label.x || 0);
              yCoordinate = section.y + (section.label.y || 0);
  
              let attributes = {
                  'x': xCoordinate,
                  'y': yCoordinate,
                  'fill': section.label.color || '#333333',
                  'font-family': section.label.fontStyle || 'Verdana',
                  'font-size': section.label.fontSize || '10'
              };
  
              if (section.label.alignment === undefined) {
                  section.label.alignment = &quot;center|center&quot;;
              }
  
              if (section.label.alignment !== undefined) {
                  switch (section.label.alignment) {
                      case &quot;center|center&quot;:
                          attributes['text-anchor'] = &quot;middle&quot;;
                          attributes['dominant-baseline'] = &quot;middle&quot;;
                          attributes['x'] = (section.width / 2) + section.x;
                          attributes['y'] = (section.height / 2) + section.y;
                          break;
                      case &quot;horizontal_center&quot;:
                          attributes['text-anchor'] = &quot;middle&quot;;
                          attributes['x'] = (section.width / 2) + section.x;
                          break;
                      case &quot;vertical_center&quot;:
                          attributes['dominant-baseline'] = &quot;middle&quot;;
                          attributes['y'] = (section.height / 2) + section.y;
                          break;
                      default:
                          throw &quot;Alignment mode requested was not found.&quot;;
                  }
              }
  
              let textNode = this.createSvgNode(&quot;text&quot;, attributes, section.label.text);
  
              this.draw(textNode);
          }
      },
  
      drawPath: function(path) {
          for (let i = 0; i &lt; (path.length - 1); i++) {
              let lineNode = this.createSvgNode('line', {
                  x1: path[i].x,
                  y1: path[i].y,
                  x2: path[i + 1].x,
                  y2: path[i + 1].y,
                  stroke: &quot;green&quot;,
                  'data-type': &quot;route&quot;
              });
  
              this.draw(lineNode);
          }
      },
  
      removeRouteIndicators: function () {
          let nodes = svgRootNode.querySelectorAll('[data-type=&quot;route&quot;]');
          let panZoom = svgRootNode.querySelector('.svg-pan-zoom_viewport');
  
          for (let index = 0; index &lt; nodes.length; index++) {
              if (!panZoom) {
                  svgRootNode.removeChild(nodes[index]);
              } else {
                  panZoom.removeChild(nodes[index]);
              }
          }
  
          nodes = svgRootNode.getElementsByClassName('selected');
  
          for (let index = 0; index &lt; nodes.length; index++) {
              nodes[index].classList.remove('selected');
          }
  
          nodes = svgRootNode.getElementsByClassName('destination');
  
          for (let index = 0; index &lt; nodes.length; index++) {
              nodes[index].classList.remove('destination');
          }
      },
  
      displayHallwayPoints: function (hallwayNodes) {
          for (let i = 0; i &lt; hallwayNodes.length; i++) {
              this.draw(
                  this.createSvgNode(&quot;circle&quot;, {
                      cx: hallwayNodes[i].x,
                      cy: hallwayNodes[i].y,
                      r: 2,
                      fill: hallwayNodes[i].fill || &quot;black&quot;,
                      'data-id': hallwayNodes[i].id
                  })
              );
          }
      },
      findPaths: function (startId, endId) {
          let paths = [];
          let startDoors = doors[startId];
          let endDoors   = doors[endId];
  
          for (let i = 0; i &lt; startDoors.length; i++) {
              let startingPoint = this.findPointByCoordinates(startDoors[i]);
              console.log(&quot;Starting Point: &quot; + JSON.stringify(startingPoint));
  
              for (let j = 0; j &lt; doors[endId].length; j++) {
                  let endingPoint = this.findPointByCoordinates(endDoors[j]);
                  console.log(&quot;Ending Point: &quot; + JSON.stringify(endingPoint));
  
                  let potentialPath = this.recursiveIterationOfPoints([startingPoint], endingPoint);
  
                  console.log(potentialPath);
  
                  paths = paths.concat(potentialPath);
              }
          }
  
          for (let id in paths) {
              paths[id] = this.linkRoomsWithPath(paths[id], startId, endId);
          }
  
          return paths;
      },
      recursiveIterationOfPoints: function(path, end) {
          let results = [];
          let current = path[path.length - 1];
  
          console.log(current);
  
          if (current.id === end.id) {
              return [path];
          }
  
          for (let i = 0; i &lt; current.connected.length; i++) {
              let nextPoint = hallwayPoints[current.connected[i]];
  
              let found = false;
  
              path.forEach( function (point, index) {
                  if (point.id === nextPoint.id) {
                      found = true;
                  }
              });
  
              if (found)
                  continue;
  
              var newPath = path.slice();
              newPath.push(nextPoint);
  
              results = results.concat(this.recursiveIterationOfPoints(newPath, end));
          }
  
          return results;
      },
      findPointByCoordinates: function (coordinates) {
          for (let id in hallwayPoints) {
              let point = hallwayPoints[id];
  
              if (point.x === coordinates.x &amp;&amp; point.y === coordinates.y) {
                  return point;
              }
          }
      },
      findActualCoordinatesOfDoorByCoordinates: function (coordinates, roomId) {
          let validDoors = doors[roomId];
  
          for (let id in validDoors) {
              if (validDoors[id].x === coordinates.x &amp;&amp; validDoors[id].y === coordinates.y) {
                  return validDoors[id].actual;
              }
          }
      },
      parseHallwayPoints: function (points) {
          for (let i = 0; i &lt; points.length; i++) {
              hallwayPoints[points[i].id] = points[i];
          }
      },
      findShortestPath: function(paths) {
          if (paths.length === 1)
              return paths[0];
  
          // Set benchmark range
          let shortestDistance = this.calculateDistanceForPath(paths[0]);
          let shortestPath = paths[0];
  
          // Skip the first since it's already calculated.
          for (let i = 1; i &lt; paths.length; i++) {
              let distance = this.calculateDistanceForPath(paths[i]);
  
              if (distance &lt; shortestDistance) {
  
                  shortestDistance = distance;
                  shortestPath = paths[i];
              }
          }
  
          return shortestPath;
      },
      calculateDistanceForPath: function(path) {
          let totalDistance = 0;
  
          for (let i = 0; i &lt; (path.length - 1); i++) {
              // Formula: sqrt[(x0 - x1)^2 + (y0 - y1)^2]
              totalDistance += Math.sqrt(Math.pow(path[i].x - path[i + 1].x, 2) + Math.pow(path[i].y - path[i + 1].y, 2));
          }
  
          return totalDistance;
      },
      linkRoomsWithPath: function (path, startId, endId) {
          let first = this.findActualCoordinatesOfDoorByCoordinates(path[0], startId);
          let last  = this.findActualCoordinatesOfDoorByCoordinates(path[path.length - 1], endId);
  
          path.unshift(first);
          path.push(last);
  
          return path;
      },
  
      parseConfiguration: function (options) {
          currentZIndex = options.config.defaultZIndex || 0;
          validZIndexes = options.config.validZIndexes || [0];
          showHallwayPoints = options.config.showHallwayPoints || false;
      },
  
      parseFloorPlan: function (floorLayout) {
          for (let i in floorLayout) {
              if (floorLayout[i].z === undefined) {
                  floorLayout[i].z = 0;
              }
  
              if (!(floorLayout[i].z in floorPlan)) {
                  floorPlan[floorLayout[i].z] = [];
              }
  
              floorPlan[floorLayout[i].z].push(floorLayout[i]);
          }
      },
  
      calculateSVGWidthAndHeight: function () {
          let dimensions = {
              width: 0,
              height: 0
          };
  
          let floorLayout = floorPlan[currentZIndex];
          let first = true;
  
          for (let i in floorLayout) {
              let calculatedWidth  = floorLayout[i].width + floorLayout[i].x;
              let calculatedHeight = floorLayout[i].height + floorLayout[i].y;
  
              if (first) {
                   dimensions.width = calculatedWidth;
                   dimensions.height = calculatedHeight;
  
                   first = false;
              }
  
              if (calculatedWidth &gt; dimensions.width) {
  
                  dimensions.width = calculatedWidth;
              }
  
  
              if (calculatedHeight &gt; dimensions.height) {
                  dimensions.height = calculatedHeight;
              }
          }
  
          for (let i in hallwayPoints) {
              let currentWidth = hallwayPoints[i].x;
              let currentHeight = hallwayPoints[i].y;
  
              if (currentWidth &gt; dimensions.width) {
                  dimensions.width = currentWidth;
              }
  
              if (currentHeight &gt; dimensions.height) {
                  dimensions.height = currentHeight;
              }
  
          }
  
          return dimensions;
      }
  };
  
  window.indoorMaps = IndoorMaps;
  </code></pre>
  <p>}(window));</p>