为什么我不能使用xx [this.index] .style.display？它说“无法读取undefinedbtn的属性'风格”

i want to make xx[this.index] in a loop for making each one has an index and then when i click a button of them, the background of button would turn to yellow color & the div block would change the words at the same time. why it doesn't work? i saw other people use this way is working good. how can I do? thanks a lot!

我想在一个循环中制作xx [this.index]以使每个人都有一个索引,然后当我点击它们的按钮时,按钮的背景将变为黄色并且div块将同时改变单词时间。为什么它不起作用?我看到其他人用这种方式工作得很好。我能怎么做?非常感谢!

here is my JSFiddle: http://jsfiddle.net/QCxwr/7

这是我的JSFiddle:http://jsfiddle.net/QCxwr/7

 window.onload=function()
    {
        var btn = document.getElementsByTagName('input');
        var div = document.getElementsByName('div');

        for(var i=0;i<btn.length;i++) {
            btn[i].index = i;
            btn[i].onclick=function() {
                for(var i=0;i<btn.length;i++) {
                    btn[i].className = '';
                    div[i].style.display='none';
                }
                this.className = 'active';
                div[this.index].style.display = 'block';
            };
        }
    };

3 个解决方案

#1

Please find the updated javascript code. Your DIVs array is 0 as you fetch using "getElementsByName".

请找到更新的JavaScript代码。使用“getElementsByName”获取时,DIVs数组为0。

window.onload=function()
        {
            var btn = document.getElementsByTagName('input');
            var div = document.getElementsByTagName('div');

            for(var i=0;i<btn.length;i++) {
                btn[i].index = i;alert
                btn[i].onclick=function() {                
                    for(var i=0;i<btn.length;i++) {
                        btn[i].className = '';
                        div[i].style.display='none';
                    }
                    this.className = 'active'; 
                    div[this.index].style.display = 'block';
                };
            }
        };

#2

this will refer to the window here. Unless you put a property index on the object window (really not advised) this won't work.

这将参考此处的窗口。除非你在对象窗口上放置属性索引(实际上不建议),否则这将不起作用。

So if this function is executed in a method on a object you'll have to do the classic trick :

因此,如果在对象的方法中执行此函数,则必须执行经典技巧:

 var me = this;
 window.onload=function(){
     ...
     div[me.index].style.display = 'block';
 }

#3

Your DIV array is empty. Did you mean to use

您的DIV数组为空。你的意思是用

getElementsByTagName

instead of

getElementsByName

when returning the DIVs?

什么时候返回DIV?

Also You should check the array length before attempting to access.

您还应该在尝试访问之前检查阵列长度。

Updated code http://jsfiddle.net/QCxwr/9/

更新代码http://jsfiddle.net/QCxwr/9/

#1