未捕获的类型错误:无法读取未定义的属性“hasAttribute" [英] Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
问题描述
我正在使用 来自 W3C 的脚本 来创建可访问的选项卡面板.当我用脚本加载页面时,我收到错误 Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
变量 tablist
定义如下:>
var tablist = document.querySelectorAll('[role="tablist]')[0];var 标签、面板;var延迟=确定延迟();
错误引用的代码:
//确定延迟函数确定延迟(){var hasDelay = tablist.hasAttribute('data-delay');无功延迟= 0;如果(有延迟){var delayValue = tablist.getAttribute('data-delay');如果(延迟值){延迟 = 延迟值} 别的 {延迟 = 300;}}返回延迟;}
HTML tablist
应该抓取的是:
<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">社交网络</button>
这是通过 WordPress 插件加载的,该插件排队为:
wp_enqueue_script( 'enhap-admin-script', plugins_url( '../_js/enhap.js', __FILE__ ), array(), false, true );
我看不出脚本有什么问题.我尝试在控制台中手动输入 var
命令并得到相同的结果.
您在选择器字符串中缺少尾随 "
.更改为:
document.querySelectorAll('[role="tablist"]')[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
command in the console and got the same result.
You're missing a trailing "
in the selector string. Change to:
document.querySelectorAll('[role="tablist"]')[0];
这篇关于未捕获的类型错误:无法读取未定义的属性“hasAttribute"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!