Progateの jQuery上級編の、キャラクターのボタンをクリックすると自動で「理由」欄にテキストが入るようにする、で質問があります。

$('#text-form').val(optionText+'が好きな理由は');
この部分では、valではなくtextを使用しても問題なく動作しました。
ここでtextではなくvalを使う理由は特にありませんか？

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件

~~text()を使って値を書き出す分にはおそらく問題ないですが、~~取得しようとすると正しい値が取れません。ユーザーが入力して変更しても、元のHTMLに書いてある値が取れてしまいます。

jsFiddleによる実装例（console.logに値を吐き出していきます）

.text()を使って書き換えても、すでにユーザーが入力していた場合には無効になります。

投稿2020/02/04 07:09

編集2020/02/04 07:19

maisumakun

総合スコア145183

maisumakun

2020/02/04 07:21

.text()で書き換えてそれが適用されるのは、ユーザーが当該のtextareaを編集していない場合に限られます。

reo_fukkase

2020/02/04 14:07

試してみたのですが、例えば、 text()を使った時に、理由：の場所に表示された「1. ベイビーわんこが好きな理由は」の「は」を消すと、もう一度「1. ベイビーわんこ」のボタンを押しても、「1. ベイビーわんこが好きな理由は」には直りませんでした。ですが、val()を使ったときは、同じことを行った後にもう一度「1. ベイビーわんこ」のボタンを押したら、「1. ベイビーわんこが好きな理由は」という全文に書き換えられました。このような違いがあるのですね、言葉ではうまく説明しにくくてすみません、、

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

ベストアンサー

textareaはvalueでもtextContentでもアクセスできるので
val()でもtext()でもよいのですが
formの要素なのでval()の方がベターでしょう

投稿2020/02/04 07:04

編集2020/02/04 07:28

yambejp

総合スコア114784

reo_fukkase

2020/02/04 07:11

formの要素だからval()の方がいいというのは、見やすさや判断のしやすさが理由ですか？

yambejp

2020/02/04 07:27 編集

textContentはform要素の入力の変更イベントに反応しません window.addEventListener('DOMContentLoaded', ()=>{ var ta=document.querySelector("textarea"); ta.addEventListener('input',()=>{ console.log(['value',`"${ta.value}"`,ta.value.length]); console.log(['text',`"${ta.textContent}"`,ta.textContent.length]); }); }); </script> <textarea> hoge fuga piyo </textarea>

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

あなたの回答