javascript - 未捕获的类型错误 : Cannot read property '0' of undefined in select box-6ren

javascript - 未捕获的类型错误 : Cannot read property '0' of undefined in select box

转载作者：行者123 更新时间：2023-11-28 00:05:52

我不明白为什么会收到错误，但最终结果实际上是我想要的。这是我的功能:

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"]
];

并填充此加载:

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

它实际上做了我想要它做的事情，即将建筑物名称及其坐标放入选择框中。但我在 chrome 控制台中收到此错误:

Uncaught TypeError: Cannot read property '0' of undefined

它指向这一行:

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

我不确定为什么它会在 Chrome 控制台中抛出错误，但仍然可以按预期工作。

最佳答案

也许你的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>

正如您所看到的，第二个片段可以正常工作而不会出现错误(只是因为我 trim 了 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>

关于javascript - 未捕获的类型错误 : Cannot read property '0' of undefined in select box，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31344631/

文章推荐： html - 如何在 body 风格的一行中正确设置背景不透明度？

文章推荐： c# - 如何修复不显示内容周围的框？

文章推荐： html - 在移动设备上将两个图像彼此对齐

java - 几个 "ChildException"捕获 block 与一个 "Exception"捕获 block
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？更好，我的意思是以良好的实践方式。举例说明: public stati
通过测试连接进行Powershell尝试/捕获
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
scala - 拦截与尝试/捕获
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
erlang - 如何在Erlang中进行尝试/捕获
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
delphi - 捕获 'delete'按键
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。然后我检查了 VK_DELETE 的值，它是 47。尝试使用
php - 对所有PDO查询进行一次全局尝试{}捕获{}
我很少在失败时对数据库查询使用唯一的错误消息我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我我正在寻找一种在PDO中全局设置一次try {}和ca
Java : CompletableFuture 捕获
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
Java 捕获 IOException
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
java - 捕获 JSONException
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
单引号之间的 Perl 捕获
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
java - 捕获 IllegalArgumentException？
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
java - 捕获 EJBTransactionRolledbackException
我无法理解 EJBTransactionRolledbackException。我有实体: @Entity public class MyEntity { @Id @Generate
.net - 实时网络使用统计监控/捕获？
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？要求允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
exception - 捕获 SAPSQL_DATA_LOSS
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。我试过这个: try. SELECT * FROM (rtab_name) AS rtab
java - 捕获 UnsatisfiedLinkError
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
java - 捕获 GenericJDBCException
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
Python键绑定(bind)/捕获
我想知道在python中绑定(bind)键的最简单方法例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
java - 捕获 NumberFormatException
下面是别人写的类。我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。所以我想做的是，我应该捕
jquery - 捕获/拦截所有鼠标点击
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
当选择列表值更改而没有更改事件时，Jquery 捕获
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 未捕获的类型错误 : Cannot read property '0' of undefined in select box