Question

我正在使用script from the W3C来创建可访问的标签面板。当我使用脚本加载页面时，我得到变量Uncaught TypeError: Cannot read property 'hasAttribute' of undefined的错误tablist，其定义如下：

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>

这是通过一个排队的WordPress插件加载的：

wp_enqueue_script( 'enhap-admin-script', plugins_url( '../_js/enhap.js', __FILE__ ), array(), false, true );

我看不出脚本有什么问题。我尝试在控制台中手动键入var命令并获得相同的结果。

Answer 1

您在选择器字符串中缺少尾随"。改为：

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

Answer 2

如果有人由于一个名为global-shortcut.js的js文件来到这里，则可能是您的Chrome浏览器安装了ColorZilla。卸载此程序可以解决此问题。

例如

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

希望有帮助

未捕获的TypeError：无法读取未定义的属性'hasAttribute'

2 个答案: