JavaScriptでFormの値を操作する時にハマったとこ

JavaScriptでForm要素の値の取り方

• getElementByIdで直接
• form['hoge'].elements['piyo']とか：[ ]にはnameの値
• hoge.piyoとか：nameの値でドットつなぎ

他にもいっぱいあるけど。

で、

<form action="" name="f">
  <input type="text" name="v1" value="aaa" />
  <input type="text" name="v2" value="bbb" />
</form>

こういうHTMLがあって、各要素の`value`を操作したいとする。

// Case 1: OK
var x = document.f.elements['v1'];
x.value = "Nya";

// Case 2: NG
var y = document.f.elements['v2'].value;
y = "Nyo";

なんでCase 2の方はダメなの・・？っていう。

変数の中身が

わかる人には何をいまさらって感じですが、代入する変数に問題があります。

// Case 1: OK
var x = document.f.elements['v1']; // xにはフォーム要素が代入
x.value = "Nya"; // そのフォーム要素のvalueを操作

// Case 2: NG
var y = document.f.elements['v2'].value; // y にはフォーム要素の値が代入
y = "Nyo"; // yの値を操作　≠　フォーム要素のvalue

というわけで。

`y`はフォーム要素の値が入ってるだけで、そのフォーム要素自身ではないので、後から操作しても何も起こらないってわけでした。