ブラウザ上のテキストボックスから数値を受け取って別のテキストボックスに計算結果を返す

超初心者です。
Cの勉強をしていたのですが、javascriptにも手を出してみました。
変数の考え方が違うせいか、理解が間違っているのか・・・

ブラウザ上でテキストボックスに数値を記入して、別なテキストボックスに計算結果を返すソースを考えていました。
以下のような感じです。

HTML
------------------------
<form>
林檎 100円 * <input type=text name=txt7>個　
<input type=button value="計算" onClick="func4(txt7)"><br>
合計金額は<input type=text name=txt8>円になります。
</form>
-------------------------
JS
------------------------
function func4(keisan){
document.form2.txt8.value=keisan*100;
}
------------------------
上記のように変数を使うとエラーになります。「NaN」が返ってきます。
変数を使用せずに、直接受け取る値を計算すれば出来たのですが・・・
ブラウザからなにかを入力させ、それを変数に代入した場合は数値（INT）型にはならないのでしょうか？？
詳しい方、解説をお願いします・・・

No.1 ベストアンサー 回答者： nda23 回答日時： 2009/04/10 17:51

> ～value="計算" onClick="func4(txt7)"

これだと、func4に"txt7"という変数（おそらく未定義）を渡すという
意味になります。以下のように記述してください。
onClick="func4(document.getElementsByName('txt7')[0]))"
あるいは"func4(document.form.txt7)"

> document.form2.txt8.value=keisan*100;
引数の keisan はテキストボックというオブジェクトなので、計算
できません。（数値じゃない！）
また、テキストボックスの中身は何でしょう？文字列ですね。
数字しか書いてなくても文字列です。だから 4 + 5 は "45"のように
文字連結になってしまいます。掲題のように乗算など不可能です。

先ず、中身を得るためvalueプロパティを参照しましょう。
また、これを数値化するためparseIntやparseFloatを使います。
document.form2.txt8.value=parseInt(keisan.value)*100; または
document.form2.txt8.value=parseFloat(keisan.value)*100;

この回答へのお礼

回答ありがとうございます。
テキストボックスに入力されたデータだけを受け取っていると思い込んでいました。
「オブジェクトそのものを受け取っている」という考え方でよいのでしょうか？

とりあえず
parseInt oarseFloatは初めてみたので、ひとまずこれを覚えてからもう一度挑戦します。

お礼日時：2009/04/10 18:03

No.2 回答者： yambejp 回答日時： 2009/04/10 18:11

まぁせっかくだからthisをつかってオブジェクト渡しの方が

いいでしょう

<script>
function func4(obj){
var f=obj.form;f.elements["txt8"].value=parseInt(f.elements["txt7"].value)*100;
}
</script>
<form>
林檎 100円 * <input type="text" name="txt7">個　
<input type=button value="計算" onClick="func4(this)"><br>
合計金額は<input type="text" name="txt8">円になります。
</form>