javascript - 未捕获的类型错误 : Cannot read property 'hasAttribute' of undefined

Question

我正在使用 script from the W3C创建可访问的选项卡面板。当我用脚本加载页面时，出现错误 Uncaught TypeError: Cannot read property 'hasAttribute' of undefined for a variable tablist which is defined as follows:

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

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

例如

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

希望对你有帮助