Javascript 重新计算imagemap区域坐标时出错

我正在编写一个脚本，重新计算imagemap中区域属性的坐标。当第一次加载页面时，该功能将被初始化，以便该区域的坐标根据用户浏览器的宽度进行调整。第一次一切顺利

我在window元素上添加了一个“调整大小”事件侦听器。该函数与init函数相同，并且坐标按预期进行调整。这样就行了。但有一个问题；每次我调整窗口大小时，都会看到下面的错误。当innit第一次启动时，错误不会发生

错误：

JavaScript

有人看到在resize事件上启动init函数时出现了什么问题吗？我一直在寻找解决办法。。但是没有成功

---

提前谢谢

i问题是您在start中初始化config.allAreas，但您总是在config.areaCoords中添加coords

因此，我假设错误发生在config.allAreas[I].coords=assignment处，因为I远大于config.allAreas数组的长度

此外，这可以解释你的说法，奇怪的是，这个函数第一次工作得非常完美

---

像config.areaCoords=[]这样的赋值；在start函数中，应该可以解决这个问题。

您正在使用config.areaCoords.forEach循环，因此您正在访问config.allAreas[i]。使用areaCoords索引的循环中的coords-您真的确定i索引永远不会超过config.allAreas中的元素数吗？@gus27谢谢您的回复！循环和索引似乎很好，我尝试了+1和-1，但是它会产生更多的错误。奇怪的是，该函数在加载页面时第一次完美地运行在init上。虽然在调整窗口大小时，错误会发生在它触发了已经正常工作过一次的相同函数时。谢谢您的回答！这确实造成了问题，我没有注意到这一点@CamilleSébastienNiessen这就是代码评审的目的-

Uncaught TypeError: Cannot set property 'coords' of undefined
at http://localhost:3000/js/index.js:78697:33
at Array.forEach (native)
at Object.resize (http://localhost:3000/js/index.js:78696:23)
at Object.start (http://localhost:3000/js/index.js:78691:25)
at Object.init (http://localhost:3000/js/index.js:78679:27)
at Object.start (http://localhost:3000/js/index.js:78724:27)
at init (http://localhost:3000/js/index.js:78720:19)

    /* ALL IMPORTANT CONFIG DATA
------------------------------------------------ */
const config = {
  allMaps: [],
  actualMap: document.getElementsByTagName('map')[0],
  allAreas: false,
  areaCoords: [],
  vector: false,
};

/* RECALCULATION FUNCTIONALITY
------------------------------------------------ */
const RecalculateImageMap = {
  init() {
    /* AUTOMATICALLY UPDATE COORDINATES ON RESIZED WINDOW
    ------------------------------------------------ */
    window.addEventListener('resize', ImageMapSetup.init);
    if (!config.actualMap.newSize) {
      RecalculateImageMap.start();
    }
  },
  start() {
    config.allAreas = config.actualMap.getElementsByTagName('area');
    config.vector = document.getElementById('interactive_vector');
    /* ALL COORDINATES TO ARRAY
    ------------------------------------------------ */
    for (let i = 0; i < config.allAreas.length; i++) {
      const coords = config.allAreas[i].coords;
      config.areaCoords.push(coords.replace(/ *, */g, ',').replace(/ +/g, ','));
    }
    RecalculateImageMap.resize();
  },
  resize() {
    /* FOR EACH AREA => RESIZE THE COORDINATES
    ------------------------------------------------ */
    config.areaCoords.forEach(function(area, i) {
      config.allAreas[i].coords = RecalculateImageMap.scale(area);
    });
  },
  scale(area) {
    const allValues = area.split(',');
    /* CHECK FOR DIFFERENCE IN SCREENSIZE
    ------------------------------------------------ */
    let totalScale = config.vector.width / config.vector.naturalWidth;
    let newArea = [];
    /* CHANGE EACH COORDINATE BASED ON THE NEW SCALE (DIFFERENCE SINCE LAST WIDTH)
    ------------------------------------------------ */
    allValues.map(function(coordinate) {
      let result = Math.round(Number(coordinate) * totalScale);
      newArea.push(result);
    });
    return newArea;
  }
};

/* INITIALIZE RESIZING
------------------------------------------------ */
const ImageMapSetup = {
  init() {
    ImageMapSetup.start(config.actualMap);
  },
  start(element) {
    if (element) {
      RecalculateImageMap.init(element);
      config.allMaps.push(element);
    }
  }
};

ImageMapSetup.init();

  start() {
    config.allAreas = config.actualMap.getElementsByTagName('area'); 
    ...
    for (let i = 0; i < config.allAreas.length; i++) {
      const coords = config.allAreas[i].coords;
      config.areaCoords.push(coords.replace(/ *, */g, ',').replace(/ +/g, ','));
    }

  resize() {
    /* FOR EACH AREA => RESIZE THE COORDINATES
    ------------------------------------------------ */
    config.areaCoords.forEach(function(area, i) {
      config.allAreas[i].coords = RecalculateImageMap.scale(area);
    });
  },