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

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

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

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

Q&A

解決済

2回答

861閲覧

jQureryのval()を表示したい

turugi0331

総合スコア15

jQuery

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

0グッド

0クリップ

投稿2019/06/21 10:20

編集2019/06/21 12:19

こんにちは。どうしてもわからないことがあり、質問させていただきます。

現在、jQureryの学習を進めております。

そこで入力した内容をデベロッパーツールで表示するを取り組んでいます```

<div> <input type="text" id="input" value=""> <input type="button" id="button" value="入力"> <input type="button" id="button2" value="取消"> </div>

ここまで書けたのですが、ここから悩んでいます

この次に入力した内容をval()でconsole.logで表示させようと思い

$(function(){ var value = $('#button').val(); console.log(value); });

と書くと「入力」フォームがコンソールで表示されてしまいます。
次に

$(function () {
var value = $('#text').val();
console.log(value);
;});

と入力すると定義されていないと表示されます。 ![イメージ説明](ce994813b598d6139508b41eb06317e1.png) 写真にするとこのようになります。 そこで質問といたしましては 1、コードのどの部分が間違っているのか 2、```<input type="text" id="input" value="">

をval()使用してコンソールで表示させるにはどういうコードならできるのでしょうか?

実現させたい内容として、#button をクリックした際に入力フォームのvalue属性を取得させることです。
なので#buttonのクリックイベントが発火した際に値を取得したいのです
ご指導よろしくお願いいたします

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

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

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

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

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

Lhankor_Mhy

2019/06/21 10:24

どのような出力をさせたいのかご提示ください。
turugi0331

2019/06/21 11:33

至らない文章で申し訳ございません。 <div>の一行目にある<input type="text" id="input" value="">でvalueないで文字を入力するとHTML内で表示されるようになっています。 これをval()とconsole.logを使用してデベロッパーツール内にあるコンソールで表示されるようにしたいのです
Lhankor_Mhy

2019/06/21 11:42

それはわかるのですが、turugi0331さんが期待している出力を教えて欲しいのです。 『コードのどの部分が間違っているのか』とのことですが、こちらからは求めている正解がわからないので。
turugi0331

2019/06/21 11:54

例としてあげますと、「Hello warld」のような文字列を出力させたいのです
Lhankor_Mhy

2019/06/21 12:09

いや、そういうことではないんですが…… たとえば、turugi0331さんは、 $('#button').val() が "入力" を返してくることについて、予想とは違ったのですよね? そして、『どの部分が間違っているのか』と質問されているのですよね? しかし、turugi0331さん以外の人には、その予想がわからないので、答えようがないですよね? 『val()使用してコンソールで表示させるにはどういうコードならできるのでしょうか?』という質問には、「何を」表示させるのか、という情報が含まれていないですよね? 『「Hello warld」のような文字列を出力』させるなら、console.log('Hello warld')とすればいいのですが、そういう話ではないですよね?
turugi0331

2019/06/21 12:15

回答にならぬ回答になってしまい申し訳ございません。実現させたい内容として、#button をクリックした際に入力フォームのvalue属性を取得させることです。 なので#buttonのクリックイベントが発火した際に値を取得したいのです
Lhankor_Mhy

2019/06/21 12:18

では、hatsu さんのご回答でいいと思います。
guest

回答2

0

ベストアンサー

var value = $('#button').val();
これは、id="button"のvalueを取得します

同様に、
var value = $('#text').val();
これは、id="text"のvalueを取得します。
しかし、id="text"はないので、「定義されていない」と言われます。
なので、
<input type="text" id="input" value="">

HTML

1<input type="text" id="text" value="">

としてあげると、正しく表示されると思います!

投稿2019/06/21 10:46

hatsu

総合スコア1809

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

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

turugi0331

2019/06/21 11:40

ご回答有難うございます。早速修正して、試させていただいたのですが、今度はHTML内にundefinedと表示されてしまいます。 $(function () {からのコードに問題があるのでしょうか?
hatsu

2019/06/21 15:02

1. $(function () { var value = $('#text').val(); console.log(value); ;}); の最終行は ;}); ではなく }); としましょう。 2. <input type="text" id="text" value=""> であると、取得したいvalueの値が 空 なので value="test" とかでvalueの値を持たせると良いと思います。 もしこれでもうまく表示されない場合、Javascriptのコードを追記していただけると回答しやすいかもです!
turugi0331

2019/06/23 03:30

ご回答有難うございました!。 hatsuさんの回答に').click(function()を付け加えるとできました!
hatsu

2019/06/23 03:35

おおお!よかったです????
guest

0

>#buttonのクリックイベント

この部分がjQueryのコード内に抜けている為(clickという文字はどこにもないですよね?)、ページのhtml読み込み終了時に表示されてしまっている状態ですので、イベントによって表示したいなら

$('#button').on('click',function(){ ここに発火したい処理を書く(hatsuさんが書かれているコード) });

これを $(function () { }); の中に入れる必要があります。

こうすれば、id=input の入力フォームに文字を入力して、その後 「入力」と書かれたボタンをクリックすることで、入力された文字がconsoleに出力されます。

投稿2019/06/22 02:23

mari.rinn

総合スコア296

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

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

turugi0331

2019/06/23 03:28

ご回答有難うございます! 無事解決いたしました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問