jQueryのvalについての質問です。

$('#text-form').val(optionText+'が好きな理由は');
これは、#text-formにvalue="optionText+'が好きな理由は'"というvalue値を設定しましたよね。
こう設定しただけで、ボタンを押すとoptionText+'が好きな理由は'が#text-formに現れる仕組みがわかりません。
試しに、最初から#text-formにoptionText+'が好きな理由は'というvalueを入れましたが、正しく動作しませんでした。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9  <body>
10    <div class="container">
11      <h3>キャラクター総選挙</h3>
12      <p class="call-to-action">好きなキャラクターをクリック！</p>
13      <div class="option-wrapper">
14        <div class="option-group">
15          <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_baby_wanko.png">
16          <div class="option-btn" data-option="1">1. ベイビーわんこ</div>
17        </div>
18        <div class="option-group">
19          <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_wanko.png">
20          <div class="option-btn" data-option="2">2. にんじゃわんこ</div>
21        </div>
22        <div class="option-group">
23          <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_hitsuji.png">
24          <div class="option-btn" data-option="3">3. ひつじ仙人</div>
25        </div>
26      </div>
27      <form id="form" class="form">
28        <div class="form-group">
29          <div>キャラクター：</div>
30          <select id="select-form" class="select-form">
31            <option value="0">選択してください</option>
32            <option value="1">1. ベイビーわんこ</option>
33            <option value="2">2. にんじゃわんこ</option>
34            <option value="3">3. ひつじ仙人</option>
35          </select>  
36        </div>
37        <div class="form-group">
38          <p id="error-message" class="error-message"></p>
39          <div>理由：</div>
40          <textarea id="text-form" class="text-form"></textarea>  
41        </div>
42        <button type="submit" class="btn btn-submit">送信</button>
43      </form>
44      <div class="output-wrapper">
45        <h4>結果</h4>
46        <div class="output-inner">
47          <p class="output-item">好きなキャラクター：<span id="output-select"></span></p>
48          <p class="output-item">理由：<span id="output-text"></span></p>  
49        </div>
50      </div>
51    </div>
52    <script type="text/javascript" src="script.js"></script>
53  </body>
54</html>
55

css
1body {
2  font-family: "Hiragino Maru Gothic ProN", sans-serif;
3  font-size: 14px;
4  color: #888;
5}
6
7
8h2, h3, h4, h5, h6 {
9  margin-top: 10px;
10  margin-bottom: 10px;
11  font-weight: 400;
12}
13
14label {
15  font-size: 16px;
16}
17
18.container {
19  width: 720px;
20  padding-right: 15px;
21  padding-left: 15px;
22  margin-right: auto;
23  margin-left: auto;
24}
25
26h3 {
27  color: #555;
28  padding-top: 50px;
29  padding-bottom: 10px;
30  text-align: center;
31  font-size: 32px;
32  font-weight: 300;
33}
34
35h3::before, h3::after{
36  content: "";
37  background-color: #616161;
38  display:inline-block;
39  width: 40px;
40  height: 1px;
41  margin: 0 2rem;
42  vertical-align: middle;
43}
44
45.section-content {
46  width: 80%;
47  margin: 0 auto;
48}
49
50.call-to-action {
51  text-align: center;
52  font-size: 18px;
53}
54
55.option-wrapper {
56  text-align: center;
57  margin-bottom: 15px;
58}
59
60.option-group {
61  margin-bottom: 12px;
62  margin: 20px auto;
63  display: inline-block;
64  margin: 20px auto;
65}
66
67.option-image {
68  width: 120px;
69  height: auto;
70}
71
72.option-btn {
73  cursor: pointer;
74  width: 154px;
75  margin: 10px;
76  padding: 12px 0;
77  text-align: center;
78  background-color: #5dca88;
79  box-shadow: 0px 4px #279C56;
80  border-radius: 3px;
81  color: #fff;
82  font-size: 16px;
83}
84
85.option-btn:active{
86  position: relative;
87  top: 2px;
88  box-shadow: none;
89}
90
91.form .select-form, .form .text-form {
92  margin: 0;
93  padding: 0 10px;
94  border: none;
95  color: #202020;
96  font-family: 'Open Sans', sans-serif;
97  font-size: 16px;
98  font-weight: 300;
99  border-radius: 0;
100  box-shadow: none;
101  transition: all .3s;
102  padding: 15px;
103  background: rgba(0, 0, 0, 0.08);
104}
105
106.form-group {
107  margin-bottom: 20px;
108}
109
110.select-form {
111  margin: 10px 0;
112  width: 100%;
113}
114
115.text-form {
116  width: 100%;
117  height: 75px;
118}
119
120.btn-submit {
121  font-family: 'Dosis', sans-serif;
122  font-size: 20px;
123  font-weight: 600;
124  background: #5983ff;
125  border: 1px solid #5979ff;
126  color: white;
127  box-shadow: inset 0 1px 0 #5867ed;
128  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
129  transition: all .3s;
130  padding: 12px 26px;
131}
132
133.output-wrapper h4 {
134  font-size: 20px;
135  color: rgb(68, 68, 68);
136}
137
138.output-inner {
139  padding: 10px 20px;
140  border: 2px dotted;
141  border-radius: 3px;
142  width: 100%;
143  margin-bottom: 60px;
144}
145
146.output-item {
147  font-size: 18px;
148  margin: 8px 0px;
149}
150
151.error-message {
152  color: #F51414;
153  height: 20px;
154}

jQuery
1$(function() {
2  $('#form').submit(function() {
3    var selectItem = $('#select-form').val();
4    var textItem = $('#text-form').val();
5    if (textItem == '') {
6      $('#error-message').text('理由を記入してください');
7    } else {
8      $('#error-message').text('');
9    }
10    $('#output-select').text(selectItem);
11    $('#output-text').text(textItem);
12    return false;
13  });
14
15  // 「.option-btn」要素のclickイベントをつくってください。
16  $('.option-btn').click(function(){
17    var optionText=$(this).text();
18    $('#text-form').val(optionText+'が好きな理由は');
19  });
20  
21});

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

回答2件

自己解決

https://www.sejuku.net/blog/45297
https://shibukage.com/web/html-css/feature-of-textarea
このページで理解しました。
まだまだ勉強不足の私にお時間をさいていただきどうもありがとうございました。

投稿2020/02/05 04:36

reo_fukkase

総合スコア50

js
1  $('.option-btn').click(function(){
2    var optionText=$(this).text();
3    $('#text-form').val(optionText+'が好きな理由は');
4  });

ここの処理部分が、option-btnクラスがついている要素をクリック（click）した際にイベントが走るようになっているからです。

はじめからテキストエリア（text-form）部分に値を入れておく場合は

html
1<textarea id="text-form" class="text-form">ここに入力しておく</textarea>

ことで実現できます

投稿2020/02/04 15:20

編集2020/02/04 15:21

sola-msr

総合スコア876

reo_fukkase

2020/02/04 15:27

クリックしたことで、valueが#text-formに追加されるということは理解できるのですが、value="optionText+'が好きな理由は'"が追加されただけで、optionText+'が好きな理由は'というテキストが表記される仕組みがわかりません。

sola-msr

2020/02/04 15:33

？あまり意味がわからないのですが、 value属性に（ここでいうテキスト「optionText+'が好きな理由は'」）をセットしたから optionText+'が好きな理由は'というテキストが表記されたのでは？それは正しい挙動だと思います

reo_fukkase

2020/02/04 16:06

ちょっと意味のわからない質問ですみません。今はval属性がなんなのかよくわからず、調べてもわからずで悩んでいます。今までは、classやidなどは、指定するための名前？のようなイメージでした。なのにval属性の場合は、なぜ属性に指定した文字が実際に表示されるのか、よくわかりません。

sola-msr

2020/02/04 16:17

jQuery（JavaScript）を扱う前にHTMLについて勉強したほうがいいかもしれません。 http://html5.cyberlab.info/elements/forms/input-value.html https://html-coding.co.jp/annex/dictionary/html/input/ このあたりを参考にしてみてください。

reo_fukkase

2020/02/04 16:23

valの取得は理解できていると思いますですが、valの設定がよくわかりません。 valを設定したからといってどうなるのですか？がんばって調べていますが全然わかりません、よろしくお願いします????‍♂️

reo_fukkase

2020/02/04 16:24

読んでみます、ありがとうございます

sola-msr

2020/02/04 16:29

valの設定する＝する必要があるから、valを設定するのですよね？例えばテキスト入力欄に最初から（ページを開いた時点で）例文を入力した状態で表示させたいだとか、ラベル欄にユーザーが入力した値を表示させたいだとか、色々用途は考えつくと思います。そのあたりの必要性だとか、valを設定する状況の理解がないとそもそも使わないしそれ以外の知識が足りてないと思います。

reo_fukkase

2020/02/04 17:09

input type=textでは、valの引数に値を入れることで、フォームにその値がセットされることはわかりました。「valの引数に値を入れることで、フォームにその値がセットされることはわかりました。」と言いましたが、現在はtextareaのことなので、valではなくtextメソッドでもいいのかな？とも思ったのですが、$('#text-form').text(optionText+'が好きな理由は');とすると、一度フォームの文字をいじると、そのあとはボタンを押してもフォームの中の文は変わらなくなってしましました。valだと正常に動作しました。ここでのtextとvalの違いがわかりません、

maisumakun

2020/02/04 21:54

> ここでのtextとvalの違いがわかりません、前の質問で解決していなかったのですか？ https://teratail.com/questions/239402

reo_fukkase

2020/02/05 04:36

前のページで解決しました。 https://www.sejuku.net/blog/45297 https://shibukage.com/web/html-css/feature-of-textarea このページで理解しました。まだまだ勉強不足の私にお時間をさいていただきどうもありがとうございました。

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

あなたの回答