1

次のエラーを表示するスクリプトがあります: ' TypeError: clickables[ic] is undefined ' Firebug/ブラウザ コンソールでチェックすると。私はバニラJavaScriptで物事を行う方法を学ぼうとしているJavaScriptの初心者です。そのため、まさにその解決策を具体的に探しています。

質問: 未定義の TypeError を取り除く/黙らせるにはどうすればよいですか?

スクリプトが行うべきこと:

これを使用して、表示属性が none に設定されている非表示の要素を明らかにします。スクリプトは、ドキュメント内の特定のクラスのすべてのインスタンス.item-reveal を取得し、そのクラスを持つ各アイテムに与えられた一意の ID と結合して、 getElementsByClassNameを介して検索する新しいクラスを形成する必要があります。.item-revealを持つアイテムクラスはクリックされる項目であり、非表示/表示される項目には .ID-reveal-item クラスがあります (クリック可能な要素の一意の ID の後に .item-reveal クラス名が逆になっています)。ID はスタイリングにはまったく使用されません。要素の任意のペアに適用できる命名規則に基づいて一意のクラスを作成するだけです。表示属性のスタイル。

スクリプトの機能:

現在、スクリプトは実際に onclick でアイテムを表示し、その後のクリックでそれらを再度非表示にし、複数のアイテムで動作します。したがって、基本的には機能します。「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: $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();
}) ();

スクリプトは、BODY 終了タグの直前の SCRIPT タグを介してリンクされます。Async 属性と Defer 属性の両方で、HTML ドキュメント内の他のスクリプトの有無にかかわらず試してみましたが、結果は同じです。イベントハンドラーを追加して、DOM の読み込みがまだ進行中のものではないことを確認しようとしましたが、実際に何かを行っているかどうかを実際にテストする方法がわかりません。単体テストは、私が慣れ親しもうとしているところです。

まったく関係のない業界で数年過ごした後、スキルを磨こうとしているので、昨年は Web 開発技術に追いつき、レスポンシブ デザインと HTML5 データのことを学び、javascript を学ぼうとすることばかりでした。私はいくつかの電子ブック/本を検索し、読み、購入しましたが、これは私が理解できないことに出くわした数少ない例の 1 つです。正式なプログラミング/スクリプトの知識を持っている人にとっては、おそらく単純で明白なことだと思いますが、私は e ビジネス専攻であり、ネットワーキング、マーケティング、サーバー/システム サポート、ケーブル配線、HTML/CSS などは私が快適に過ごせる場所です。どんな助けでも大歓迎ですが、選択により、jQueryを持たない環境/プロジェクトでこれを実装しようとしていることを覚えておいてください。ありがとう！

4

1 に答える 1

0

これでリストの最後から外れます：

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

これを次のように変更します。

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

clickCountはリストの長さであり、0 ベースのインデックスでclickables[clickCount - 1]あるため、リストの最後の要素です。clickables[clickCount]存在しないものにアクセスしようとしました。

于 2015-02-27T02:20:34.420 に答える