Uncaught TypeError: Cannot read property 'reset' of undefinedというエラー文の対処方法がわかりません。

個人情報を入力するフォームを作っていて、入力情報を登録したら画面をリセットする機能を付けようとしていたら、
「Uncaught TypeError: Cannot read property 'reset' of undefined」というエラーが出ました。
似た様な記事を沢山見ましたが、何故か解決出来ません。
開発環境は、DockerとRailsを使ってます。
Webブラウザから直接開くとエラーが出なかったのに、何故か仮想サーバーから開くとエラーが出てしまいます。
お力添えをお願いします。。。

HTMLのヘッダはこんな感じです。
最終行の「buttons.js」がjsファイルになります。

html
1<head>
2        <meta charset="utf-8">
3        <link rel="stylesheet" href="top.css">
4        <link rel="stylesheet" href="modal.css">
5        <script type="text/javascript" src="js/func.js"></script>
6        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
7        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
8        <script type="text/javascript" src="buttons.js"></script>
9</head>

HTMLのbodyは長すぎて貼り付けられないので、resetをしたいところのフォームタグだけ載せます。

HTML
1<form class="form-signin" name="form_signin">
2　　　個人情報入力フォーム
3</form>

「buttons.js」のreset文です。

javascript
1$(document).ready(function(){
2    $("#submit").click(function(){
3        $(".form-signin")[0].reset();
4        removeAddedFR();
5        $("#telError").fadeOut();
6    });
7});

removeAddedFRに問題があるかも知れないので、そちらも載せておきます。
FRはFamilyRelationの略です。

こんな感じで最大3人まで登録できます。
リセットした時に、１枚目の写真の様にする為の機能です。

javascript
1const removeAddedFR = function(){
2  var y = $(".bbb").get(0);
3  if (y.hasChildNodes()) {
4    while (y.childNodes.length > 4) {  
5        y.removeChild(y.lastChild);
6    }
7  }
8};

html
1<tr class="aaa"> 
2      <th>家族構成<span style="color:red;" >*</span>
3      <br>
4      <button type="button" id="addFamilyRelation" value="+"\>  <font size="5" color="black">+</font>
5      <br>
6      <br>
7      <nobr><span id="frError" style="font-size:11px;" >*1人以上記入してください。</span></nobr>
8      </th>
9      <td class="bbb">
10      続柄：<input type="text" placeholder="例）父" class="family zokugara" id="family_relation" >
11      <br>
12      名前：<input type="text" placeholder="例）岡本　太郎" class="family name_zoku" id="family_name" >
13      </td>
14</tr>

よろしくお願いします。。。

madoka9393

2019/02/20 06:19 編集

reset()の前に余計なものが挟まってません…？ ⇒[0]取ったら取ったで not a function なので当方の認識違いかもですが…。 ⇒[0]はあってよいというかないといけないんですね。知識不足でした。　参考リンク：http://blog.dododori.com/create/program/jquery-reset/ とりあえず参考になりそうなリンクとか。 https://www.softel.co.jp/blogs/tech/archives/4320 http://te2u.hatenablog.jp/entry/2015/03/04/234457

m.ts10806

2019/02/20 05:32

おかしいですね。 property のundefinedであればreset()ではないはずですが（()がつくということはfunctionです）それに同コードのreset()部分ではエラーが起きず、きちんとresetされます。 removeAddedFR()の中に問題があるのではないでしょうか？

行動規範の内容に同意します

回答2件

この質問の私の回答を参照してください。
https://teratail.com/questions/175042#reply-260518

JavaScriptではnullとundefinedはプロパティを所持出来ない特別な値になっており、プロパティを参照しようとするとエラーになります。

つまり$(".form-signin")[0]で対象のDOMが見つからなければ、
空配列的な存在になる為、0番目のプロパティの結果はundefinedになります。
そのundefinedはプロパティを所持出来ない為にresetプロパティを探しにいき、エラーになると考えるのが自然です。

いや「.form-signinあるし？」と言われても、
「undefinedはresetプロパティ持ってませんよ？」しか読み取れませんが？

こんな所で生産性のない押し問答を続けてもしかたありません。
質問文の通りform-signinクラスのフォームはDOM上に存在するとしましょう。

次に怪しいのがこいつです。

removeAddedFR();

この中で何かにアクセスして、
resetメソッドを実行しようとしているのではないでしょうか？
そこでtypoなどして、$('film-signin')[0].reset()みたいな事を書いていればやはり上記のエラーにたどり着きます。

このようにエラー内容をちゃんと読んでから原因を絞り込んでいきましょう。

投稿2019/02/20 05:37

miyabi-sun

総合スコア21384

自己解決

Webブラウザから開く場合は、同じpathにjs、cssが存在していたので開くことができました。
今回は、rails環境で開こうとしたので、pathが異なっている為、js,css自体が読み込まれていませんでした。

html
1<link rel="stylesheet" href="top.css">
2<link rel="stylesheet" href="modal.css">
3<script type="text/javascript" src="buttons.js"></script>

上の文を、下の文に書き換えて、

html
1<%= stylesheet_link_tag "top", media: "all" %>
2<%= stylesheet_link_tag "modal", media: "all" %>
3<%= javascript_include_tag "buttons" %>
4

railsの「config/initializers/assets.rb」に

rails
1Rails.application.config.assets.precompile += %w( buttons.js )
2Rails.application.config.assets.precompile += %w( top.css )
3Rails.application.config.assets.precompile += %w( modal.css )

と書けば動きました。
助言くださった皆様、有難う御座いました！！！

投稿2019/02/20 08:23

Beginnerrr

総合スコア17