JavaScrict文の意味について

Question

var key =document.getElementById('key').value + ','+ document.getElementById('key2').value；

このJavaSprictの解説をお願いします。

私は変数keyにid="key"を持つ要素とid="key2"を持つ要素をを代入するという意味でとらえていたのですが、自身が持てません。よろしくお願いいたします。

Answer 1

JavaScriptのdocumentオブジェクトはHTMLドキュメント及びXHTMLドキュメントを表現するオブジェクトです。
getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッドです。
valueは値でフォームなどに実際に入力されているデータを指します。

---

例を示します。HTML文書に下記のようなタグがあるとします。

<input typy="text" id="form1" value="Yahoo!">

下記のjavaScriptを実行した場合

alert("document.getElementById("form1").value");

「Yahoo!」と表示されたアラートダイアログが表示されます。

変数keyにid="key"を持つ要素とid="key2"を持つ要素を代入

正確には、id="key"を持つ「要素の値」とid="key2"を持つ「要素の値」を結合したものを代入するということになるかと思います。

Comments

[gumamori]

ご回答ありがとうございます。
+ ','によってid="key"を持つ「要素の値」とid="key2"を持つ要素の値が結合されているということですね。

この場合、仮にid="key"に10 id="key2"に3という値が入った場合、変数varに代入されるのは「103」と「10,3」のどちらなのでしょうか？

[mtdsnsk]

HTML文書には型の概念はないかと思いますので、文字列として処理されると思いますので、103と出力されると思います。

valueプロパティの値は文字列なので、数値として計算する場合にはNumber()等を使って明示的に数値型に変換する必要があると思います。

[gumamori]

文字列として処理されることから、以下の3通りのパターンを挙げると
key…10、key2… 1の時、変数varは101
key…無し、key2… 1の時、変数varは1
key…10、key2… 無しの時、変数varは10

変数varの値はこのようになるのですね！

[mtdsnsk]

そうですね。気になる場合は実際に試してみると良いと思います！

[gumamori]

何通りか試してみました。そこで一つ疑問です。
key…321 key2…無し
key…32 key2…1
key…3 key2…21
key…無し key2…321

この4通りの場合、変数varってどれも321ですよね？
ですが結果は別物として正しく表示されました。　これはなぜなのでしょうか？

[mtdsnsk]

すいません、` + ',' + ` こちらの記述を見落としていました。
'3,21'のように表示されると思います

[gumamori]

ありがとうございます！これでやっと、` + ',' + `の意味が理解できました！