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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

6132閲覧

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

Beginnerrr

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/02/20 05:20

編集2019/02/20 06:12

個人情報を入力するフォームを作っていて、入力情報を登録したら画面をリセットする機能を付けようとしていたら、
「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人まで登録できます。
リセットした時に、1枚目の写真の様にする為の機能です。

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>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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()の中に問題があるのではないでしょうか?
guest

回答2

0

この質問の私の回答を参照してください。
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

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問