Uncaught TypeError：無法讀取屬性'0'在選擇框中未定義

我不明白爲什麼我得到錯誤，但最終結果實際上是我想要的。這裏是我的功能：Uncaught TypeError：無法讀取屬性'0'在選擇框中未定義

function populate(){ 
    for(var i = 0; i < locations.length; i += 1){ 
     var select = document.getElementById("end"); 
     select.options[select.options.length] = new Option(buildings[i][0], buildings[i][3]); 
    } 
};

它拉在此數組：

buildings = [ 
      ['Allied Health', '', 'buildings', '35.206815, -101.908493', 2, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Building A', '', 'buildings', '35.206718, -101.906127', 3, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Building B', '', 'buildings', '35.207614, -101.907383', 4, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Building C', '', 'buildings', '35.207545, -101.905702', 5, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Building D', '', 'buildings', '35.207408, -101.906485', 6, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Child Development Center', '', 'buildings', '35.207409, -101.908901', 7, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Gymnastics/Dance', '', 'buildings', '35.207264, -101.909682', 8, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Jones Hall', '', 'buildings', '35.207514, -101.908236', 9, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Lecture Hall', '', 'buildings', '35.206754, -101.907246', 10, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['N.W. Library', '', 'buildings', '35.206543, -101.904580', 11, "http://www.actx.edu/staff/images/icons/ac.png"], 
      ['Delta Building', '', 'buildings', '35.208272, -101.905817', 12, "http://www.actx.edu/staff/images/icons/ac.png"] 
];

，並填充這個onload事件：

<body onload="populate();"> 
<select class="form-control" id="end" onchange="calcRoute();"> 
        <option disabled selected> -- Select a Destination -- </option> 
       </select>

，它實際上做什麼，我想要它做的，這將建築物名稱及其座標放入選擇框中。但是我在控制檯得到鉻此錯誤：

Uncaught TypeError: Cannot read property '0' of undefined

，並指出這條線：

select.options[select.options.length] = new Option(buildings[i][0], buildings[i][3]);

我不知道爲什麼它拋出鉻合金控制檯中的錯誤，但仍然會作爲意。

來源

2015-07-10 trf

也許你的i變量剛剛超過buildings長度。例如，如果您有20個位置和15個建築物，則當瀏覽器評估new Option(buildings[15][0], buildings[15][3])時，會引發此錯誤。

編輯：只是更具體一點，假設我們有15個建築物，我們的陣列將有索引從0到14，因此建築物[15]是undefined。這是你錯誤來自的地方，你正在嘗試閱讀buildings[15][0]，就像讀取undefined[0]一樣。

您也應該發佈locations變量以獲得更好的響應。

var buildings = [ 
 

 
      ['Allied Health', '', 'buildings', '35.206815, -101.908493', 2, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building A', '', 'buildings', '35.206718, -101.906127', 3, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building B', '', 'buildings', '35.207614, -101.907383', 4, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building C', '', 'buildings', '35.207545, -101.905702', 5, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building D', '', 'buildings', '35.207408, -101.906485', 6, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Child Development Center', '', 'buildings', '35.207409, -101.908901', 7, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Gymnastics/Dance', '', 'buildings', '35.207264, -101.909682', 8, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Jones Hall', '', 'buildings', '35.207514, -101.908236', 9, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Lecture Hall', '', 'buildings', '35.206754, -101.907246', 10, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['N.W. Library', '', 'buildings', '35.206543, -101.904580', 11, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Delta Building', '', 'buildings', '35.208272, -101.905817', 12, "http://www.actx.edu/staff/images/icons/ac.png"]   
 
      ]; 
 

 
var locations = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,]; 
 

 
function populate() { 
 
    for(var i = 0; i < locations.length; i += 1){ 
 
    var select = document.getElementById("end"); 
 
    select.options[select.options.length] = new Option(buildings[i][0], buildings[i][3]); 
 
    } 
 
};

<body onload="populate();"> 
 
<select class="form-control" id="end" onchange="calcRoute();"> 
 
        <option disabled selected> -- Select a Destination -- </option> 
 
       </select>

這段代碼顯示了我說的是（如果你打開你的瀏覽器控制檯，你應該看到相同的錯誤，這剛好與locations陣列比buildings是長引起的）。

var buildings = [ 
 

 
      ['Allied Health', '', 'buildings', '35.206815, -101.908493', 2, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building A', '', 'buildings', '35.206718, -101.906127', 3, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building B', '', 'buildings', '35.207614, -101.907383', 4, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building C', '', 'buildings', '35.207545, -101.905702', 5, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building D', '', 'buildings', '35.207408, -101.906485', 6, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Child Development Center', '', 'buildings', '35.207409, -101.908901', 7, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Gymnastics/Dance', '', 'buildings', '35.207264, -101.909682', 8, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Jones Hall', '', 'buildings', '35.207514, -101.908236', 9, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Lecture Hall', '', 'buildings', '35.206754, -101.907246', 10, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['N.W. Library', '', 'buildings', '35.206543, -101.904580', 11, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Delta Building', '', 'buildings', '35.208272, -101.905817', 12, "http://www.actx.edu/staff/images/icons/ac.png"]   
 
      ]; 
 

 
var locations = [0, 0, 0, 0, 0, 0, 0, 0, 0,]; 
 

 
function populate() { 
 
    for(var i = 0; i < locations.length; i += 1){ 
 
    var select = document.getElementById("end"); 
 
    select.options[select.options.length] = new Option(buildings[i][0], buildings[i][3]); 
 
    } 
 
};

<body onload="populate();"> 
 
<select class="form-control" id="end" onchange="calcRoute();"> 
 
        <option disabled selected> -- Select a Destination -- </option> 
 
       </select>

正如你可以看到這第二片斷工作沒有給錯誤（只是因爲我修剪locations陣列的一部分）。我建議你以始終顯示所有的建築物，你可以在此（終於在上）看到改變

for(var i = 0; i < locations.length; i += 1){

與

for(var i = 0; i < buildings.length; i += 1){

片段：

var buildings = [ 
 

 
      ['Allied Health', '', 'buildings', '35.206815, -101.908493', 2, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building A', '', 'buildings', '35.206718, -101.906127', 3, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building B', '', 'buildings', '35.207614, -101.907383', 4, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building C', '', 'buildings', '35.207545, -101.905702', 5, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Building D', '', 'buildings', '35.207408, -101.906485', 6, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Child Development Center', '', 'buildings', '35.207409, -101.908901', 7, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Gymnastics/Dance', '', 'buildings', '35.207264, -101.909682', 8, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Jones Hall', '', 'buildings', '35.207514, -101.908236', 9, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Lecture Hall', '', 'buildings', '35.206754, -101.907246', 10, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['N.W. Library', '', 'buildings', '35.206543, -101.904580', 11, "http://www.actx.edu/staff/images/icons/ac.png"], 
 
      ['Delta Building', '', 'buildings', '35.208272, -101.905817', 12, "http://www.actx.edu/staff/images/icons/ac.png"]   
 
      ]; 
 

 
function populate() { 
 
    for(var i = 0; i < buildings.length; i += 1){ 
 
    var select = document.getElementById("end"); 
 
    select.options[select.options.length] = new Option(buildings[i][0], buildings[i][3]); 
 
    } 
 
};

<body onload="populate();"> 
 
<select class="form-control" id="end" onchange="calcRoute();"> 
 
        <option disabled selected> -- Select a Destination -- </option> 
 
       </select>

來源

2015-07-10 15:46:50

上帝我是個白癡。你是正確的，地點的長度是問題。位置陣列是一個單獨的陣列，我錯過了改變它。啞啞啞。但你指出了它。謝謝！ – trf

Uncaught TypeError：無法讀取屬性'0'在選擇框中未定義

回答

相關問題