みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

見よう見まねで以下のように作成してみたのですが

見よう見まねで以下のように作成してみたのですが
作動しませんでした。
(当方javascript初心者です)
どこに問題があるのか、指摘してくださる方を探しています。

極めて初歩的なところで誤っているのだろうと思いますので
質問するのも恐縮なのですが・・・
どなたかよろしくお願いいたします。

------------------------------------------

<HTML>
<HEAD>
<script language="JavaScript">
function calc(){

var a = document.form1.001.value;

var b = document.form1.002.value;

var c = document.form1.003.value;

var d = document.form1.004.value;

var total = a + b + c + d;

document.form1.field.value = total;

}

</script>
</HEAD>
<BODY>


<BR><BR>

<form name="form1">

<Select name="001">
<Option value="10">case1
<Option value="20">case2

</Select>ケース
<BR><BR>

<INPUT size="15" type="text" name="002">number

<BR><BR>
<Select name="003">
<Option value="100">volume1
<Option value="200">volume2
<Option value="300">volume3
</Select>ボリューム
<BR><BR>
<Select name="004">
<Option value="0">N
<Option value="50">size1
<Option value="100">size2
<Option value="150">size3
</Select>サイズ
<BR><BR>
<INPUT type="button" name="calc" value="計算" onClick="calc()"><BR><BR>
<input size="15" readonly="readonly" name="field" type="text">total
</form>
</BODY>
</HTML>

投稿日時 - 2010-03-21 11:37:54

QNo.5768095

困ってます

質問者が選んだベストアンサー

絶対にだめなところは2点
<INPUT type="button" name="calc" value="計算" onClick="calc()">
はボタンの名前にcalcとつけてますが呼び出す関数名もcalcで
競合しています。
まずはその辺から切り分ける癖をつけないと苦労すると思います。

それと
var a = document.form1.001.value;
的な書き方もだめですね。せめてelements["001"]としたいところです。
(もちろんもっといい書き方はありますが)

また、valueをたしてますが、得られる値は基本的に文字列なので
数値かした方がいいです。
htmlの書き方もふくめて、ざっくりなおしてこんな感じで・・・

<html>
<head>
<script type="text/javascript">
function calc(f){
var a = parseInt(f.elements["001"].value);
var b = parseInt(f.elements["002"].value);
var c = parseInt(f.elements["003"].value);
var d = parseInt(f.elements["004"].value);
var total = a + b + c + d;
f.elements["field"].value = total;
}
</script>
</head>
<body>
<form>
<p>
<select name="001">
<option value="10">case1</option>
<option value="20">case2</option>
</select>ケース
</p>
<p>
<input size="15" type="text" name="002">number
</p>
<p>
<select name="003">
<option value="100">volume1</option>
<option value="200">volume2</option>
<option value="300">volume3</option>
</select>ボリューム
</p>
<p>
<select name="004">
<option value="0">N</option>
<option value="50">size1</option>
<option value="100">size2</option>
<option value="150">size3</option>
</select>サイズ
</p>
<p>
<input type="button" value="計算" onClick="calc(this.form)">
</p>
<p>
<input size="15" readonly="readonly" name="field" type="text">total
</p>
</form>
</body>
</html>

投稿日時 - 2010-03-21 13:42:59

お礼

正常に作動しました!
助かりました。ありがとうございました!

投稿日時 - 2010-03-22 09:08:25

ANo.1

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

にちようびでもかつどうするとは・・・^^;

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-cdata
http://d.hatena.ne.jp/urx/20060627/p1

var a = parseInt(f.elements["a001"].value);
みじかく
var a = +f.elements["a001"].value;
とか

es=f.elements;
var a = parseInt(es["a001"].value, 10);
var b = parseInt(es["a002"].value, 10);

投稿日時 - 2010-03-21 14:19:34

お礼

お休みのところ、ありがとうございました。
参考になります!

投稿日時 - 2010-03-22 09:09:10

あなたにオススメの質問