消除自动执行匿名函数中未定义的TypeError

Question

我有一个脚本给了我以下错误：“TypeError:clickables[ic]未定义”，当我用Firebug/在浏览器控制台中检查它时。我是一名javascript初学者，正在尝试学习如何使用vanilla javascript进行操作，因此我正在专门寻找一种解决方案。

问题是：如何消除/消除未定义的TypeError？

我使用它来显示隐藏的元素，其显示属性设置为无。脚本应该获取文档中特定类的所有实例，. item-揭示，用一个唯一的ID连接它，每个具有该类的项目都被给定，以形成一个新的类，通过getElementsByClassName进行搜索。具有. item-揭示类的项目是被点击的项目，未隐藏/揭示的项目具有. ID-揭示-项目类（可点击元素的唯一ID后跟. item-揭示类名颠倒，用于简单约定）。ID根本不用于定位，它只是根据命名约定创建一个唯一的类，该类可以应用于任何一对元素：一个被点击的元素，一个通过创建/更改显示属性的样式来取消隐藏/隐藏的元素。

目前，该脚本实际上会在单击时显示项目，并在随后的单击中再次隐藏它们，并且可以处理多个项目。所以，它基本上是可行的。我只是想不出“类型错误：可点击的[ic]是未定义的”问题以及如何摆脱它。当我使用开发工具时，我在几个浏览器中都能看到它。

该脚本是对自动执行匿名函数之类的东西的尝试，所以我知道约定有点不同，但我想坚持使用它，以便我可以将其应用于未来的其他用途。启发它的文章在这里找到：

http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write

超文本标记语言

<!-- Item to be clicked, with unique ID -->
<h3 class="item-reveal" id="plan-1">Click for special pricing!</h3>

<p>An introductory paragraph...</p>

<!-- Hidden item to be revealed, will always have a unique class -->
<p class="plan-1-reveal-item">Special, this month only: $49.99</p>

<h3 class="item-reveal" id="plan-b">Click for special pricing!</h3>
<p>An introductory paragraph...</p>
<p class="plan-b-reveal-item">Special, this month only: $29.99</p>

CSS

/* Init - hide/unhide onclicks */
.item-reveal                {cursor:pointer;}
[class$="-reveal-item"]     {display:none;}
/* Halt - hide/unhide onclicks */

javascript：

var clickables = document.querySelectorAll('.item-reveal');
var clickCount = clickables.length;
(function () {
    var Reveal = {
        swapThis: function () {
            for (var ic = 0; ic <= clickCount; ic += 1) {
                // Next line seems to create the error message.
                clickables[ic].onclick = function (unhideHide) {
                    var hidden = this.id;
                    var findClass = hidden += '-reveal-item';
                    var revealSwap = document.getElementsByClassName(findClass);
                    for (rn = 0; rn < revealSwap.length; rn++) {
                        revealSwap[rn].style.display = (revealSwap[rn].style.display == 'block') ? 'none' : 'block';
                    }
                }
            }
        }
    }
    Reveal.swapThis();
}) ();

脚本通过SCRIPT标记链接，就在结束BODY标记之前。我已经尝试过使用Async和Defer属性，在超文本标记语言文档中使用和不使用其他脚本，结果是一样的。我尝试添加一个事件处理程序以确保它不是DOM加载仍在进行的东西，但我不确定如何真正测试它以查看它是否真的在做任何事情。单元测试是我刚刚开始尝试熟悉自己的东西。

在一个完全不相关的行业工作了几年后，我正试图忘掉技能上的灰尘，所以过去的一年都是关于网络开发技术的追赶，学习响应式设计和HTML5数据的东西，并尝试学习javascript。我搜索、阅读并购买了几本电子书/书籍，这是为数不多的几次我遇到无法弄清楚的东西之一。我想对于具有正式编程/脚本知识的人来说，这可能是一些简单明了的事情，但我是电子商务专业的，网络、营销、服务器/系统支持、布线、超文本标记语言/CSS等是我舒服的地方。非常感谢任何帮助，但请记住，我正在尝试在没有jQuery的环境/项目中实现它。谢谢！

Answer 1

您将以以下内容离开列表的末尾：

for (var ic = 0; ic <= clickCount; ic += 1) 

将其更改为：

for (var ic = 0; ic < clickCount; ic += 1) 

clickCount是列表的长度，因此由于它是基于0的索引，clickables[clickCount-1]是列表中的最后一个元素。您试图访问不存在的clickables[clickCount]。