イメージマップ領域座標を再計算するときのエラー

Question

イメージマップ内の領域属性の座標を再計算するスクリプトを作成しています。最初にページを読み込むとき、関数は初期化され、領域の座標はユーザーのブラウザの幅に合わせて調整されます。最初の時間はすべてうまくいく。

window要素に 'resize'イベントリスナーを追加しました。関数は起動し（init関数と同じ）、座標は期待どおりに調整されます。そうです。しかし、1つの問題があります。ウィンドウのサイズを変更するたびにエラーが表示され続けます（エラーが発生するのは初めてです）。

エラー：resizeイベントにinit関数を発射するとき誰もがうまくいかない何

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) 

はJavaScript

/* 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(); 

を参照していますか？私はしばらくの間、解決策を探していました。しかし、それは成功しません。

ありがとうございます！

Answer 1

IMHO問題は、あなたがstart()でconfig.allAreasを初期化しているということですが、あなたは常にあなたは今config.allAreasよりもはるかに多くの要素が含まれ、config.areaCoordsをループさresize()でその後config.areaCoords

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, ',')); 
    } 

にCOORDSを追加している。

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

ここでは、iは非常にgなので、config.allAreas[i].coords =割り当てでエラーが発生するとしますconfig.allAreasアレイの長さよりも長い。

さらに、これは「関数が初めて完璧に機能するということは奇妙なことです」と説明しています。

start()関数のconfig.areaCoords = [];のような割り当てが問題を解決するはずです。