Question

我有一个脚本，它给我以下错误：＆＃39; TypeError：clickables [ic]未定义＆＃39;当我用Firebug /浏览器控制台检查时。我是一个javascript初学者，正试图学习如何在vanilla javascript中做事，所以我正在寻找专门针对这种解决方案的解决方案。

问题：我如何摆脱/沉默未定义的TypeError？

脚本应该做什么：

我用它来揭示隐藏的元素，其display属性设置为none。该脚本应该获取文档中特定类的所有实例， .item-reveal ，并使用唯一ID将每个具有该类的项目加入，以形成要搜索的新类for via getElementsByClassName 。带有 .item-reveal 类的项目是单击的项目，未隐藏/显示的项目具有.ID-reveal-item类（可点击元素的唯一ID后跟.item-reveal类名反转，简单约定）。 ID根本不用于存在，它只是根据可以应用于任何元素对的命名约定创建一个唯一类：一个被点击，一个被取消隐藏/通过创建/更改显示属性的样式来隐藏。

脚本的作用：

目前，该脚本实际上会显示项目onclick，并在后续点击中再次隐藏它们，并且它适用于多个项目。所以，它基本上是有效的。我无法弄清楚＆＃39; TypeError：clickables [ic]未定义＆＃39;问题以及如何摆脱它。我在使用开发人员工具时可以在多个浏览器中使用它。

这个脚本是一个尝试自动执行匿名函数的东西，所以我知道约定有点不同，但我想坚持下去，所以我可以把它应用到其他用途路。启发它的文章可以在这里找到：

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标记之前。我已经尝试了Async和Defer属性，在HTML文档中有和没有其他脚本，结果是一样的。我尝试添加一个事件处理程序，以确保它还没有持续进行DOM加载，但我不确定如何真正测试它以确定它是否真的在做任何事情。单元测试是我刚刚开始尝试熟悉自己的东西。

在一个完全不相关的行业中，我试图在几年后试图消除技能，所以去年一直在追赶网络开发技术，学习响应式设计和HTML5数据，并尝试学习javascript。我搜索，阅读并购买了几本电子书/书籍，这是我遇到的一些我无法弄清楚的事情之一。我认为对于拥有正式编程/脚本知识的人来说，这可能是一件简单而明显的事情，但我是一名电子商务专业，网络，营销，服务/系统支持，布线，HTML / CSS等，是我和＃的地方39;舒服。非常感谢任何帮助，但请记住，我试图在没有jQuery的环境/项目中实现这一点。谢谢！

Answer 1

你将离开列表的末尾：

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

将其更改为：

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

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

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

脚本应该做什么：

脚本的作用：

实施例

1 个答案: