うーん・・・

JavaScript 初心者ですが詳しい方教えていただけませんか

解決済

質問者：mimiko35nana
質問日時：2015/04/15 14:38
回答数：2件

JavaScript だけでなくWEB作成が初心者なんですが教えてください。

http://www.tagindex.com/javascript/form/comp1b.h …
こちらのサイトを参考に自動計算できるものを作りたいと考えています。
商品は1つ。計算は単純に掛け算で、プルダウンではなく数字を入力したいと思います。
数字は最大500000まで入力する可能性があります。

金額の欄がすごくせまくなってしまったのと、入力するとNaNとなってしまいます。
以下を見ていただけませんか。
よろしくお願いします。

<html>
<head>
<title>計算</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head>
<body>

<form action="#" name="form1">

<table>
<tr>
<th>商品名</th>
<th>単価</th>
<th>数量</th>
<th>金額</th>
</tr>
<tr>
<td>商品サンプル</td>
<td align="right">105円</td>
<td><input type="text" name="goods1"></td>

<td><input type="text" name="field1" size="8" value="0"> 円</td>
</tr>

<tr>
<td align="right" colspan="3"><strong>合計</strong></td>
<td><input type="text" name="field_total" size="8" value="0"> 円</td>
</tr>
</table>
<input type="button" value="計算する" onClick="keisan()">
</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： umioyo
回答日時：2015/04/15 15:30

var price1 = document.form1.goods1.selectedIndex * 105; // 単価を設定

ここですが、サンプルのところから持ってきたのだと思いますが、selectindexは、セレクタで選ばれているものを取得しますので、テキストボックスの場合はvalueで取得します。

余談ですが、これはJSなのでページ遷移などないですが、CGIなどでデータをポストする場合はフォームに入れた数値は、半角数字であってもテキストとして扱われます。
なので、
var price1 = parseInt(document.form1.goods1.value) * 105; // 単価を設定
とするようなクセを付けておいたほうがいいかもしれないです。（冗長と嫌がる人もいるかもしれないですが。。。）
parseIntは調べてみてくださいね。
頑張ってください。

- 0
- 件

通報する

この回答へのお礼

早々にご回答いただきましてありがとうございました。初めて質問したのですが、すごいですね。
selectindexは、セレクタで選ばれているものを取得しますので、テキストボックスの場合はvalueで取得します。と、的確なアドバイスをいただき無事うごくようになりました。大変お世話になりました。もっとわかるように勉強したいと思いました。ありがとうございます。

通報する

お礼日時：2015/04/15 19:12

No.2

回答者： Ogre7077
回答日時：2015/04/15 16:16

> 金額の欄がすごくせまくなってしまった

金額の <input> を修正してください。
案1: size の値をもっと大きい数にする
案2: 数量の <input> と同様に size を書かない
案3: <output name=field_total></output> に変換する、ついでに <td align=right> とする

> 入力するとNaNとなってしまい
document.form1.goods1.selectedIndex が間違いです
案1: parseInt(document.form1.goods1.value) ← 数量は必ず整数
案2: parseFloat(document.form1.goods1.value) ← 数量に半端な数を認める