javascript - 未捕获的类型错误 : Cannot set property 'width' of undefined, javascript

Question

首先，我尝试扩展下拉列表以适应与用户相关的搜索(例如:Billy Bob's Restaurant - 98765)(这是用经典 ASP 编写的):

Response.Write "<td id='aRow' onMouseOver=""resizeMenu(" & i-1 & ", " & numOpts & ")"" colspan=2 style='padding-left:5px;'>" & vbcrlf

然后我有一个抛出错误的函数:无法设置未定义的属性“宽度”。

这是这里的函数:

function resizeMenu(theOpt, numOpts) {

var i, thisOpt;
var toAdjust;   

if (numOpts > 1 ) {
    toAdjust = 60 / (numOpts - 1);
} else {
    toAdjust = 0;
}

for (i=0; i < numOpts; i++) {
    thisOpt = document.getElementById("anOpt" + (i+1));
    if (i == theOpt) {
        if (numOpts > 1) {
            document.getElementById('aRow')[i].width = (optWidth + 60).toString() + "px";
            thisOpt.style.width = (optWidth + 40).toString() + "px";
        } else {
            document.getElementById('aRow').width = (optWidth).toString() + "px";
            thisOpt.style.width = (optWidth - 20).toString() + "px";
        }
    } else {
        if (numOpts > 1) {
            document.getElementById('aRow')[i].width = (optWidth - toAdjust).toString() + "px";
        } else {
            document.getElementById('aRow').width = (optWidth - toAdjust).toString() + "px";
        }
        thisOpt.style.width = (optWidth - toAdjust - 20).toString() + "px";
    }

}

};

当我将鼠标悬停在下拉菜单上时，出现错误。我查看了代码，但无法弄清楚到底出了什么问题。

我还应该注意到，我继承了这段代码，而且我对 JavaScript 编程还相当陌生。该错误显示在 Chrome 的调试器中。在 Firefox 和 IE11 中，它不会显示在调试器中。如果我在 for 循环之前注释掉最后一个大括号下面的部分，则页面加载完成后脚本只会显示错误消息。

Answer 1

   document.getElementById('aRow')[i].width = (optWidth + 60).toString() + "px";

当页面上的多个元素使用 id 时，该代码期望 .getElementById() 返回一个 NodeList。浏览器曾经这样做，但据我所知，Firefox 和 Chrome 都没有这样做。

对多个元素使用相同的 id 与标识符的目的背道而驰。您可以通过将代码更改为

，让您的代码在支持 .querySelectorAll() 的浏览器中运行

   document.querySelectorAll('#aRow')[i] // ... whatever ...

哦，一般来说，像“无法[做某事]未定义的属性“某事””这样的错误意味着您有这样的代码

      x.something

但是x是未定义；换句话说，代码的期望没有得到满足，因此它会因该错误而失败。因此，要追踪此类错误的来源，您只需在代码中查找在 . 之后或方括号内使用属性名称的位置即可。