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

質問

超初心者です。
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 · ベストアンサー

> ～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は初めてみたので、ひとまずこれを覚えてからもう一度挑戦します。

回答No.2

yambejp

まぁせっかくだから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>