最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Uncaught TypeError: Cannot read property 'hasAttribute' of undefined - Stack Overflow

programmeradmin0浏览0评论

I am using a script from the W3C to create accessible tab panels. When I load the page with the script, I get the error 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();

The code that the error refers to:

// 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;
}

And the HTML tablist is supposed to grab is:

<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>

This is being loaded via a WordPress plugin that is enqueued as:

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

I cannot see anything wrong with the script. I tried manually typing the var mand in the console and got the same result.

I am using a script from the W3C to create accessible tab panels. When I load the page with the script, I get the error 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();

The code that the error refers to:

// 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;
}

And the HTML tablist is supposed to grab is:

<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>

This is being loaded via a WordPress plugin that is enqueued as:

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

I cannot see anything wrong with the script. I tried manually typing the var mand in the console and got the same result.

Share Improve this question asked Apr 13, 2018 at 2:22 CedonCedon 6277 silver badges16 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

If anyone has arrived here due to a js file called global-shortcut.js you may have ColorZilla installed on your chrome. Uninstalling this fixes the issue.

e.g.

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

Hope that helps

You're missing a trailing " in the selector string. Change to:

document.querySelectorAll('[role="tablist"]')[0];
发布评论

评论列表(0)

  1. 暂无评论