谁能发现我的错误？ 我在第37行收到了“ TypeError：movableItems [i]未定义”

Question

谁能发现我的错误？

我在第37行收到“ TypeError：undefinedItems [i]未定义”。

我注释了第36-38行，但控制台中再也没有出现该错误。 这是我为社区大学的测试练习而准备的一章教程。

"use strict";

// declare global variables for setup page
var zIndexCounter;
var pos = [];
var origin;

// perform setup tasks when page first loads
function setUpPage() {
  document.querySelector("nav ul li:first-of-type").addEventListener("click", loadSetup, false);
  document.querySelector("nav ul li:last-of-type").addEventListener("click", loadDirections, false);

  var movableItems = document.querySelectorAll("#room div");
  zIndexCounter = movableItems.length + 1;
  for (var i = 0; i < movableItems.length; i++) {
    movableItems[i].addEventListener("mspointerdown", startDrag, false);
    movableItems[i].addEventListener("pointerdown", startDrag, false);
    if (movableItems[i].addEventListener) {
      movableItems[i].addEventListener("mousedown", startDrag, false);
      movableItems[i].addEventListener("touchstart", startDrag, false);
    } else if (movableItems[i].attachEvent) {
      movableItems[i].attachEvent("onmousedown", startDrag);
    }
  }
  // disable IE10+ interface gestures
  movableItems[i].style.msTouchAction = "none";
  movableItems[i].style.touchAction = "none";
}

// configure page to display Setup content
function loadSetup() {
  document.querySelector("nav ul li:first-of-type").className = "current";
  document.querySelector("nav ul li:last-of-type").className = "";
  document.getElementById("setup").style.display = "block";
  document.getElementById("location").style.display = "none";
  location.search = "";
}

// configure page to display Directions content
function loadDirections(string) {
  document.querySelector("nav ul li:first-of-type").className = "";
  document.querySelector("nav ul li:last-of-type").className = "current";
  document.getElementById("setup").style.display = "none";
  document.getElementById("location").style.display = "block";
}


// run setUpPage() function when page finishes loading
window.addEventListener("load", setUpPage, false);

// add event listeners and move object
// when user starts dragging
function startDrag(evt) {
  // set z-index to move selected element on top of others
  this.style.zIndex = zIndexCounter;
  // increment z-index counter so next selected element is
  // on top of others
  zIndexCounter++;
  if (evt.type !== "mousedown") {
    evt.preventDefault();
    this.addEventListener("touchmove", moveDrag, false);
    this.addEventListener("mspointermove", moveDrag, false);
    this.addEventListener("pointermove", moveDrag, false);
    this.addEventListener("touchend", removeTouchListener, false);
    this.addEventListener("mspointerup", removeTouchListener, false);
    this.addEventListener("pointerup", removeTouchListener, false);
  } else {
    this.addEventListener("mousemove", moveDrag, false);
    this.addEventListener("mouseup", removeDragListener, false);
  }
  pos = [this.offsetLeft, this.offsetTop];
  origin = getCoords(evt);
}

function moveDrag(evt) {
  var currentPos = getCoords(evt);
  var deltaX = currentPos[0] - origin[0];
  var deltaY = currentPos[1] - origin[1];
  this.style.left = (pos[0] + deltaX) + "px";
  this.style.top = (pos[1] + deltaY) + "px";
}

// identify location of object
function getCoords(evt) {
  var coords = [];
  if (evt.targetTouches && evt.targetTouches.length) {
    var thisTouch = evt.targetTouches[0];
    coords[0] = thisTouch.clientX;
    coords[1] = thisTouch.clientY;
  } else {
    coords[0] = evt.clientX;
    coords[1] = evt.clientY;
    return coords;
  }
}

// remove mouse event listeners when dragging ends
function removeDragListener() {
  this.removeEventListener("mousemove", moveDrag, false);
  this.removeEventListener("mouseup", removeDragListener, false);
}

// remove touch event listeners when dragging ends
function removeTouchListener() {
  this.removeEventListener("touchmove", moveDrag, false);
  this.removeEventListener("mspointermove", moveDrag, false);
  this.removeEventListener("pointermove", moveDrag, false);
  this.removeEventListener("touchend", removeTouchListener, false);
  this.removeEventListener("mspointerup", removeTouchListener, false);
  this.removeEventListener("pointerup", removeTouchListener, false);
}

Answer 1

您正在访问movableItems[i]循环结束后 ，当i == movableItems.length -关闭列表的末尾。

移动循环中的最后两个访问：

for (var i = 0; i < movableItems.length; i++) {
  movableItems[i].addEventListener("mspointerdown", startDrag, false);
  movableItems[i].addEventListener("pointerdown", startDrag, false);

  if (movableItems[i].addEventListener) {
    movableItems[i].addEventListener("mousedown", startDrag, false);
    movableItems[i].addEventListener("touchstart", startDrag, false);
  } 
  else if (movableItems[i].attachEvent) {
    movableItems[i].attachEvent("onmousedown", startDrag);
  }

  // moved the following two lines into the loop
  movableItems[i].style.msTouchAction = "none"; 
  movableItems[i].style.touchAction = "none";
}

Answer 2

在第37行，您不在先前的for循环之外，尝试访问仅在for循环内部可访问的i变量。