【JavaScript エラーメッセージ】「TypeError: ●●● is not a function」が表示された時に解決した方法

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

JavaScriptでコードを書いていたら「TypeError: “x” is not a function」(

“x”にエラーが該当する関数が入る）といエラーメッセージが表示されたことはありますか？

先日このエラーメッセージに遭遇したので、その時に無事に解決した方法を紹介します。

目次表示

いきなり結論
問題のコード
解説
まとめ

目次へ

いきなり結論

いきなり結論から書きますと、関数名の「タイプミス」が原因でした。

調べてみるとこのエラーは他にも原因もあるとのことですが、私の場合はタイプミスでした。

厳密に言うと、タイプミスというよりは、似た名前の関数を間違えて選び記載したということになります。

関数名については後述します。

まず、エラー解決までの経緯を書きますと、

エラーが出たのでさっそく検索してみたところ、MDN Web Docsに結論が記載されていました。

関数名のタイプミス
次のように関数名を間違えている場合に発生します。なおこのミスは非常に多く発生します。
引用元サイト：TypeError: “x” is not a function – JavaScript – MDN Web Docs

タイプミス！？このわ　た　く　しが！？しかしそこがやはり、わたくしクオリティ（笑）。しっかりタイプミスしてました。

原因は関数名のタイプミスで、しかも問題のコードはよく見ないと、正しいコードとの違いがすぐにはわかりませんでした。

引用元サイトによるとタイプミスは非常に多いらしいです。

問題のコード

該当エラー

TypeError: checkGroup.forEach is not a function（太字の箇所は関数名が変われば変わります。）

エラーが出たコード↓



var checkText = "";
 //無関係のコード省略・・・
function check() {
    var checkGroup = document.getElementsByTagName('check');

    checkGroup.forEach(function (e) {
        e.addEventListener("click", function () {
            checkText = document.querySelector("input:checked[name=check]").value;
　　　　　　　 //無関係のコード省略・・・
        });
    });
}

エラーが解決したコード↓

var checkText = "";
 //無関係のコード省略・・・
function check() {
    var checkGroup = document.getElementsByName('check');

    checkGroup.forEach(function (e) {
        e.addEventListener("click", function () {
            checkText = document.querySelector("input:checked[name=check]").value;
　　　　　　　 //無関係のコード省略・・・
        });
    });
}

解説

getElementsByTagNameからgetElementsByNameに変更したらエラーが解決しました。

今回のコードではラジオボタンがクリックされたときに、クリックしたボタンのvalueを取得したかったのです。

そのためにはinput要素のname属性に’check’を持つHTML要素を取得する必要があります。例えば以下のようなコード

<input type="radio" name="check" id="check" value="完了" checked="checked">

なのでエラーが解決したコードにあるように、getElementsByNameが適切だったのです。

getElementsByTagNameだとcheckというタグ名をもつ要素を取得しようとしてしまうので、エラーが出ました。

私のアプリのコード内にcheckというタグ名の要素は存在していなかったのです。（もっともdivなどのタグが存在していて、document.getElementsByTagName(‘div’);と記述していても同じエラーが出る。なので、タグがアプリ内に存在しているかは今回は無関係であると思われる。）