質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

Cannot read property 'undefined' of undefined というエラー

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,733

score 7

 前提・実現したいこと

通販サイトの
検索機能に「サイズ」等の規格を追加するカスタマイズを行っており、
開発環境で実装実現いたしましたが、
本番環境にアップするとなぜかうまくいきません。

GooglechromeDevで調査すると
以下のようなエラーメッセージが発生したことが判明いたしました。

開発環境で再度動作の確認、
及びGooglechromeDevで視ても
問題なく動くのですが、
本番環境だとやはりどうにもこうにもという感じです。

もう1点不明なことが、
本番環境にアップして間もない時は、本番環境でも問題なく動作しました。
※1.しかしながら、本番環境にて商品を一旦一括削除し
再度商品をアップしたら、上記のような事象が発生しました。

ご回答ありがとうございます。
エラー検知該当箇所は以下でございます。

var num = document.form1.search_classcategory_id.selectedIndex;

特に開発環境では同様の箇所に値が入るのですが、
本番環境では「undefined」となってしまいます。

原因がわからなく、1日以上悩んでいる状態です。
どなた様か、アドバイスをいただけたら非常に幸いです。

 発生している問題・エラーメッセージ

TypeError: Cannot read property 'undefined' of undefined

 該当のソースコード

<script type="text/javascript">
    function func_submit_class( id, class_name ){
        var fm = window.opener.document.form1;
        var num = document.form1.search_classcategory_id.selectedIndex;
        var classcategory_val = document.form1.search_classcategory_id.options[num].value;
        var err_text = '';

        fm.mode.value = 'select_product';
        fm.select_classcategory_id.value = classcategory_val;
        fm.select_product_id.value = id;
        fm.select_rank.value = '119';
        if(fm.select_pos){
            fm.select_pos.value = '';
        }
        if (classcategory_val == '__unselected') {
            err_text = class_name + "を選択してください。\n";
        }
        if (err_text != '') {
            alert(err_text);
            return false;
        }

        fm.submit();
        window.close();
        return false;
    }
</script>

<form name="form1" id="form1" method="post" action="#">
    <table class="list">
        <col width="15%" />
        <col width="12.5%" />
        <col width="60%" />
        <col width="12.5%" />
        <tr>
            <th>商品画像</th>
            <th>商品コード</th>
            <th>商品名</th>
            <th>決定</th>
        </tr>

        <!--{foreach name=loop from=$arrProducts item=arr}-->
        <!--▼商品<!--{$smarty.foreach.loop.iteration}-->-->
        <tr>
            <td class="center">
                <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arr.main_list_image|sfNoImageMainList|h}-->&width=65&height=65" alt="" />
            </td>
            <td>
                <!--{assign var=codemin value=`$arr.product_code_min`}-->
                <!--{assign var=codemax value=`$arr.product_code_max`}-->
                <!--{* 商品コード *}-->
                <!--{if $codemin != $codemax}-->
                    <!--{$codemin|h}--><!--{$codemax|h}-->
                <!--{else}-->
                    <!--{$codemin|h}-->
                <!--{/if}-->
            </td>
            <td>
                <!--{$arr.name|h}-->

                <!--{assign var=class1 value=classcategory_id`$arr.product_id`_1}-->
                <!--{assign var=classlist value=`$arrClassCat1List`}-->
                <!--{if $tpl_classcat_find1[$arr.product_id]|h}-->

                    <dt><!--{$tpl_class_name1[$arr.product_id]|h}--></dt>
                        <dd>
                            <select name="search_classcategory_id" id="<!--{$class1}-->" style="<!--{$arrErr[$class1]|sfGetErrorColor}-->">
                            <!--{foreach from=$arrClassCat1[$arr.product_id] key=key item=item}-->
                                <option value="<!--{$key|h}-->">
                                    <!--{$item|h}-->
                                </option>
                            <!--{/foreach}-->
                            </select>
                        </dd>
                <!--{else}-->
                        <input type="hidden" name="<!--{$class1}-->" id="<!--{$class1}-->" value="" />
                <!--{/if}-->
            </td>
            <!--{if $tpl_classcat_find1[$arr.product_id] == 'true'}-->
            <td class="center"><a href="" onClick="return func_submit_class('<!--{$arr.product_id}-->','<!--{$tpl_class_name1[$arr.product_id]|h}-->');">決定</a></td>
            <!--{else}-->
            <td class="center"><a href="" onClick="return func_submit(<!--{$arr.product_id}-->)">決定</a></td>
            <!--{/if}-->
        </tr>
        <!--▲商品<!--{$smarty.foreach.loop.iteration}-->-->
        <!--{/foreach}-->
        <!--{if !$tpl_linemax>0}-->
        <tr>
            <td colspan="4">商品が登録されていません</td>
        </tr>
        <!--{/if}-->

    </table>
    <!--{/if}-->
    <!--{* ▲検索結果表示 *}-->

</form>

 試したこと

・開発環境にて※1と同様の操作を行っても
開発環境ではうまく動作してしまいます。

・現在の本番環境の該当するソースコードを
開発環境にコピペしても開発環境では正常動作してしまいます。

・データベースを確認致しましたが、
私が確認できる範囲ではデータの相違は見受けられませんでした。

 補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/04/03 14:56

    エラー内容と共にエラーが発生した(ブラウザがエラーを検知した)箇所(スクリプト行)について追記願います.

    キャンセル

  • defghi1977

    2018/04/03 15:12

    あと、PHPコードのではなくてPHPで処理した結果得られたHTMLを確認(できれば開発環境と本番環境とで出力されたものを比較)して下さい.

    キャンセル

回答 1

checkベストアンサー

+2

 TypeError: Cannot read property 'undefined' of undefined

TypeError: Cannot read property 'undefined' of undefined

エラーメッセージを解読して下さい。
日本語訳すれば「undefined 値の undefined プロパティを読み取れません」の意となり、次の疑似コードで再現可能です。

var obj;
obj.undefined; // TypeError: Cannot read property 'undefined' of undefined

一般に "undefined" という名前のプロパティを定義する状況は考えづらいですが、変数を利用しているならありえます。

var obj, prop;
obj[prop]; // TypeError: Cannot read property 'undefined' of undefined

 当該エラー行の確認

エラー検知該当箇所は以下でございます。

var num = document.form1.search_classcategory_id.selectedIndex;

このコードで当該エラーが発生するとは考えられません。
なぜなら、undefined プロパティを参照するコードが存在しないからです。

いずれにしてもこれはオブジェクトの構造上の問題ですので、コンソールデバッグやbreakpointを設定して該当オブジェクトの中身が期待通りのものかを確認して下さい。

defghi1977 さんが仰るようにPHPが出力しているHTMLを確認して下さい。JavaScriptからすれば「出力されたHTML」が全てです。

 複数の <select name="search_classcategory_id">

あまり深く読んでいませんが、<select name="search_classcategory_id"> が複数存在していませんか?
複数存在するなら、下記コードでエラーになりそうですが…。

var classcategory_val = document.form1.search_classcategory_id.options[num].value;

(2018/04/03 22:57追記)

疑似コードで再現出来ました。

<form name="form1" id="form1" method="post" action="#">
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
  <select name="search_classcategory_id">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
  </select>
</form>

<script>
'use strict';
var num = document.form1.search_classcategory_id.selectedIndex;
console.log(num);   // undefined
console.log(document.form1.search_classcategory_id.options);    // undefined

var classcategory_val = document.form1.search_classcategory_id.options[num].value;    // TypeError: Cannot read property 'undefined' of undefined
</script>

Re: wa.shi さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/05 12:40

    仰る通りでございました。
    「class_category_id」が複数存在し、
    「class_category_id」の中身のselectのoption値が読み取れず、
    「undefined」となっているのが原因でした。
    上記、selectのoption値を読み取るようにカスタマイズをしたら
    解決致しました。
    疑似コードまで明記頂き誠にありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る