valueを取得する意味がよくわかりません

Question

javascriptについてなのですが，valueを取得する意味がよくわかりません。

<form action='URL' id='form'>
 <input type='text' name='word'>
 <input type='submit' value='検索'>
</form>
<p id='output'></p>

<script>
 document.getElementById('form').onsubmit=function(){
 const search=document.getElementById('form').word.value;
 document.getElementById('output').textContent=`「${search}」の検索中`
};
</script>

form，wordの取得が必要なのはわかるのですが，valueの取得がいったい何に利用されているのかがよくわかりません。ネットで調べたもののうまく理解できず...。
ご教授いただけると幸いです。

Answer 1

取得直後に利用されてますが。

document.getElementById('output').textContent=**「${search}」**の検索中

結局は書いた人しか意図は分からないんですが、このコードからだけで分かることは
「入力情報を画面表示に使うから」ですかね。

Comments

[coffee_milk]

回答ありがとうございます。
テキストの名前であるwordに入力した文字が入ると思い込んでいたのですが、valueにテキストの中身が入っているということでしょうか？

[m.ts10806]

formのword なので、要素そのものしか指してません。
要素が持つ情報を得るにはその要素のプロパティを参照する必要があります。

[m.ts10806]

この「要素」部分は「オブジェクト」の概念をおさえるようにしてください。
JavaScriptに限らず必須の概念です。

[coffee_milk]

ありがとうございます。
まだまだ勉強不足のようですね^^;
勉強になりました。頑張ります。

[m.ts10806]

どの言語もですが、1つ書籍（出版1年内が理想）を購入して体系的な学習をされたほうが良いと思います。
あとはドキュメント（JavaScriptならMDNが有名）を確認する癖をつけること、デバッグすること、エラーを読むこと
これだけで大抵のことは解決できます。

[coffee_milk]

そうなのですね。
現在、2019年発行のJavaScript入門書を勉強中なのですが、HTML.CSSに比べて理解が難しく…。
何とかアプリ、もしくはサイトを作れるまでになりたいのですが、道のりは遠そうですね^^;
デバッグやエラーの確認、心がけますね！

Answer 2

このコードだと検索ワードを画面に表示するためだと思いますよ。
teratailで仮にjavascriptでワード検索した時に
「javascript」の検索結果
と表示されますがそれと同じです。

入れる理由を聞かれているのであるならば入れた人にしかわかりません。

Comments

[coffee_milk]

「javascript」の文字を表示させるのならば，textの名前であるwordでそれを拾えるのではないかと思うのですが，そうではないのでしょうか？

[black-ddd]

name属性はinput自体の名称でidのようなものです。
一方でvalueはユーザーが送信するための値の初期値を設定することができます。

これを日常会話に置き換えると
「今日のご飯」は「カレー」です。
「今日のご飯」・・・name属性
「カレー」・・・value属性
になります。
なのでnameを拾おうとすると「今日のご飯」が拾われてしまうため
valueを拾うのだと思います。(浅い知識)

[coffee_milk]

ありがとうございます！
初期値というのがよくわからなかったのですが、なんとなく理解できました。助かりました。