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

Question

我有一个脚本，当我使用 Firebug/in 浏览器控制台检查它时，出现以下错误:“TypeError: clickables[ic] is undefined”。我是一名 javascript 初学者，正在尝试学习如何使用 vanilla javascript 做事，因此我正在专门寻找一种解决方案。

问题:如何摆脱/消除未定义的 TypeError？

脚本应该做什么:

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

脚本的作用:

目前，该脚本实际上会在点击时显示元素，并在随后的点击中再次隐藏它们，并且它适用于多个元素。所以，它基本上是有效的。我只是想不通“TypeError: clickables[ic] is undefined”问题以及如何摆脱它。使用开发人员工具时，我在多个浏览器中都得到了它。

该脚本是一种 self 执行匿名函数之类的尝试，所以我知道惯例有点不同，但我想坚持使用它，以便以后可以将它应用于其他用途。启发它的文章可以在这里找到:

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

示例:

HTML

<!-- 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 标签之前。我已经在 HTML 文档中同时使用 Async 和 Defer 属性尝试过，无论是否使用其他脚本，结果都是一样的。我尝试添加一个事件处理程序以确保它不会在 DOM 加载仍在进行的情况下发生，但我不确定如何真正测试它是否真的在做任何事情。单元测试是我刚刚开始尝试熟悉的东西。

在一个完全不相关的行业工作了几年后，我正试图摆脱技能，所以去年一直在学习网络开发技术，学习响应式设计和 HTML5 数据，并尝试学习 javascript .我已经搜索、阅读并购买了几本电子书/书籍，这是我遇到一些我无法理解的事情的几次之一。我想这对于具有正式编程/脚本知识的人来说可能是简单明了的事情，但我是电子商务专业的学生，​​网络、市场营销、服务器/系统支持、布线、HTML/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]。