Javascript 未捕获类型错误：无法读取属性'；hasAttribute'；未定义的

我正在使用创建可访问的选项卡面板。当我加载带有脚本的页面时，我得到错误

uncaughttypeerror:无法读取变量
tablist
的未定义属性'hasAttribute'

var tablist = document.querySelectorAll('[role="tablist]')[0];
var tabs, panels;
var delay = determineDelay();

错误所指的代码：

// Determine delay
function determineDelay () {
    var hasDelay = tablist.hasAttribute('data-delay');
    var delay = 0;

    if (hasDelay) {
        var delayValue = tablist.getAttribute('data-delay');
        if (delayValue) {
            delay = delayValue
        } else {
            delay = 300;
        }
    }

    return delay;
}

而HTML
tablist
应该抓取的是：

<div role="tablist" aria-label="Options">
   <button role="tab" aria-selected="true" aria-controls="general-tab" id="general-btn">General</button>
   <button role="tab" aria-selected="false" aria-controls="social-tab" id="social-btn" tabindex="-1">Social Networks</button>
</div>

我看不出剧本有什么问题。我尝试在控制台中手动键入
var
命令，得到了相同的结果
 选择器字符串中缺少尾随的
“
。更改为：

document.querySelectorAll('[role="tablist"]')[0];

如果有人因为一个名为global-shortcut.js的js文件而来到这里，你可能已经在你的chrome上安装了ColorZilla。卸载它可以解决这个问题

e、 g

希望有帮助

document.querySelectorAll('[role="tablist"]')[0];

global-shortcut.js: 10 Uncaught TypeError: Cannot read property 'hasAttribute' of null