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

Eliminate undefined TypeError in self-executing anonymous function

本文关键字：未定义 TypeError 函数 执行      更新时间：2024-07-03

我有一个脚本，当我在浏览器控制台中用Firebug/检查时，它会给我以下错误：'类型错误：clickables[ic]未定义'。我是一个javascript初学者，正试图学习如何用普通javascript做事，所以我正在专门寻找一个解决方案。

问题：如何消除/静音未定义的TypeError

脚本应该做什么：

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

脚本的作用：

目前，该脚本实际上会在单击时显示项目，并在随后的单击中再次隐藏它们，它可以处理多个项目。所以，它基本上是有效的。我只是不明白"TypeError:clickleables[ic]未定义"的问题以及如何消除它。我在使用开发工具时在几个浏览器中都会遇到它。

这个脚本是一种自动执行匿名函数的尝试，所以我知道惯例有点不同，但我想坚持使用它，这样我就可以将它应用于未来的其他用途。启发它的文章可以在这里找到：

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的环境/项目中实现这一点。谢谢

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

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

更改为：

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

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

相关文章：