JavaScriptの動かないコード（初級編）textareaの内容を読み書きする方法は，innerHTMLとvalueのどちらか？

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：

テキストエリアに入力されている文字列をアラート表示する。

<!-- 入力用のボックス -->
<textarea id="hoge">ここの文字列を書きかえてください。</textarea>

<!-- ボタン -->
<input type="button" value="入力内容を確認" onclick="f()">


<script>

function f(){
	// textareaを取得
	var elem = document.getElementById("hoge");
	
	alert( "入力された文字：" + elem.innerHTML );
}

</script>

発生する問題

そのままボタンを押すと，テキストエリア内の文字列がちゃんと表示される。

しかし，テキストエリア内の文字列を編集してからボタンを押しても，編集前の内容が表示されてしまう。

見かけの変更が，DOM構造に反映されていないような振る舞いをするのだ。

DOMで，textarea内の文字列に正しくアクセスできていない。

原因と解決策

ブラウザの画面上で，textareaに手入力した内容は，

innerHTMLではなくvalueに反映される。

なので .valueでアクセスすれば正しく読み書きできる。

innerHTMLを使おうとすると，
一見ちゃんと動いているように見えて実はちゃんと読み書きできていない，
というトラブルが多発し，クロスブラウザな挙動も期待できなくなる。

textareaにinnerHTMLは禁物だ。

.innerHTML vs. value in textarea / Articles / dracoblue.net
http://dracoblue.net/dev/innerhtml-vs...

innerHTML of an html-object like textarea may not be changed if you edited the objects content manually.

JavaScript textareaの中身は、innerHTMLではなくvalueを使う
http://kaworu.jpn.org/kaworu/2008-04-...

textareaは、innerHTMLではなく、valueにアクセスしなければなりません。

JavaScript : TEXTAREA への値代入 : typeOf 'aki_mana'
http://blog.livedoor.jp/aki_mana/arch...

TEXTAREAを対象にしたエディタを実装する場合はvalue を利用する方向で。