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

Question

我有一个脚本给出了以下错误：'TypeError: clickables[ic] is undefined' 当我用 Firebug/in 浏览器控制台检查它时.我是一个 javascript 初学者，正在尝试学习如何在 vanilla javascript 中做事，所以我正在专门寻找一个解决方案。

问题：如何摆脱 of/silence 未定义的类型错误？

脚本应该做什么：

我用它来显示隐藏的元素，其显示属性设置为 none。该脚本应该获取文档中特定 class 的所有实例，.item-reveal，将其与具有该 [=70= 的每个项目的唯一 ID 连接起来] 给出，形成一个新的 class 通过 getElementsByClassName 搜索。带有 .item-reveal class 的项目是被点击的项目，unhidden/revealed 的项目有 .ID-reveal-item class（可点击元素的唯一 ID，后跟反转的 .item-reveal class 名称，为简单约定）。 ID 根本不用于样式，它只是根据可以应用于任何一对元素的命名约定创建一个唯一的 class：一个被点击，一个被 unhidden/hidden 通过 creating/changing 显示属性的样式。

脚本的作用：

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

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

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: .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: .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 属性，在 HTML 文档中使用和不使用其他脚本，结果是一样的。我尝试添加一个事件处理程序以确保它不是 DOM 加载仍在进行的东西，但我不确定如何真正测试它是否真的在做任何事情。单元测试是我刚刚开始尝试熟悉的东西。

在一个完全不相关的行业工作了几年后，我正在努力磨练技能，所以去年一直在学习网络开发技术、学习响应式设计和 HTML5 数据东西，并努力学习 javascript。我已经搜索、阅读并购买了好几本 ebooks/books，这是我运行遇到一些我无法理解的东西的少数几次之一。我想这对于具有正式 programming/scripting 知识的人来说可能是简单明了的事情，但我主修电子商务，网络、营销、server/systems 支持、布线、HTML/CSS 等都是我很舒服。非常感谢任何帮助，但请记住，我正在尝试在没有 jQuery 的 environment/project 中实现它。谢谢！

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

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

Eliminate undefined TypeError in self-executing anonymous function

javascript

css

dom

self-executing-function

脚本应该做什么：

脚本的作用：

示例：