同時に二つのjavascriptを動かす

[新着] Webテンプレートを仮オープンしました

0   名前： たけ ： 2006/08/28（月） 23:49  ID:6fBsXP3C
検索にかけてみても、過去ログにも載っていなかったようですので、質問させていただきます。

まずはソースから。（イロイロと省いていたりしますので、見難いと思いますがご容赦ください）


<html>
<head>
<title></title>

<SCRIPT language="javascript">
<!--
function f01()
{
ten=0;
for(e=0;e<document.f01FORM.length-1;e++)
{
if(document.f01FORM.elements[e].checked)
{
ten+=eval(document.f01FORM.elements[e].value);
}}
document.f01FORM.total1.value=ten;}

//-->
</SCRIPT>

</head>
<body>
<FORM>

<INPUT TYPE="checkbox" VALUE="200" onClick="f01()">
<INPUT TYPE="checkbox" VALUE="130" onClick="f01()">
<INPUT TYPE="checkbox" VALUE="530" onClick="f01()">
<INPUT TYPE="checkbox" VALUE="30" onClick="f01()">
<INPUT TYPE="TEXT" NAME="total1">

</FORM>
</body></html>


上記は、自動計算フォームをチェックボックスで作ったものであります。
これでは　f01　のトータルしか表示されません。
私がしようと思っていることは、これをもう一つ（もちろん関数名などは変えますが）同じページ内で動かすことです。
ですが、いくら試行錯誤を重ねても基本がなっていないこともあって、失敗ばかりです。

どのように書き換えれば二つの自動計算フォームを動かすことができるのでしょうか？


おかしな表現をしている場合は、申し訳ないです。
お聞きくだされば、足りないおつむを使って、分かっていただけるように説明させていただきますので。
1   名前： sevi- ： 2006/08/28（月） 23:49  ID:9J5RKOHs
つまりイベント発生時に2種類の関数を実行させたいという意味だろうか.
イベントハンドラ内で二つの関数を順に呼び出せばいいと思うぞ.

<INPUT TYPE="checkbox" VALUE="30" onClick="f01();f02();">

onClick属性値に設定できるのはスクリプトコードだからjavascriptならセミコロンで区切って
関数を順に呼べばいい.

sevi-
2   名前： たけ ： 2006/08/28（月） 23:49  ID:6fBsXP3C
ありがとうございます sevi- 様。

では、結果報告をば。

<SCRIPT language="javascript">
<!--
function f01()
{
ten=0;
for(e=0;e<document.f01FORM.length-1;e++)
{
if(document.f01FORM.elements[e].checked)
{
ten+=eval(document.f01FORM.elements[e].value);
}}
document.f01FORM.total.value=ten;}

function f02()
{
den=0;
for(i=0;i<document.f02FORM.length-1;i++)
{
if(document.f02FORM.elements[i].checked)
{
den+=eval(document.f02FORM.elements[i].value);
}}
document.f02FORM.total2.value=den;}
//-->
</SCRIPT>
以上のように f02 を追加し、一部を以下のように変更いたしました。

<INPUT TYPE="checkbox" VALUE="200" onClick="f01();f02();">
<INPUT TYPE="checkbox" VALUE="130" onClick="f01();f02();">
<INPUT TYPE="checkbox" VALUE="530" onClick="f01();f02();">
<INPUT TYPE="checkbox" VALUE="30" onClick="f01();f02();">


こうしましたところ、エラーが発生して、目的の値が表示されませんでした。



もしかしなくても説明が良くなかったです。
イメージとしまして、

チェックボックスによる自動計算フォームＡ　と　同様の自動計算フォームＢ　があり
その二つが同時に存在し、ＡのチェックボックスでＡの点数合計、ＢではＢの点数合計をそれぞれ取得する

というものなのです。
可能でしょうか？

3   名前： sevi- ： 2006/08/28（月） 23:49  ID:9J5RKOHs
えーと、つまり以下のような話なのだろうか.
処理内容は同じようだから呼び出す関数の方は一つに出来ると思うぞ.

sevi-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Untitled Page</title>

	<script type="text/javascript">
<!--
function calc(fm)
{
	var ten = 0;
	var ele;
	for(e=0; e<fm.elements.length; e++)
	{
		ele = fm.elements[e];
		if(ele.type == "checkbox" && ele.checked)
		{
			ten += Number(ele.value);
		}
	}
	fm.total.value = ten;
}
//-->
	</script>

</head>
<body>
	<form action="#" method="get">
		<input type="checkbox" value="100" onclick="calc(this.form);" />
		<input type="checkbox" value="50" onclick="calc(this.form);" />
		<input type="checkbox" value="20" onclick="calc(this.form);" />
		<input type="checkbox" value="9999" onclick="calc(this.form);" />
		<input type="checkbox" value="1" onclick="calc(this.form);" />
		<input type="text" name="total" />
	</form>
	<form action="#" method="get">
		<input type="checkbox" value="33" onclick="calc(this.form);" />
		<input type="checkbox" value="32" onclick="calc(this.form);" />
		<input type="checkbox" value="111" onclick="calc(this.form);" />
		<input type="checkbox" value="-500" onclick="calc(this.form);" />
		<input type="checkbox" value="22222" onclick="calc(this.form);" />
		<input type="text" name="total" />
	</form>
</body>
</html>
4   名前： Pid ： 2006/08/28（月） 23:49  ID:VQHUh8sQ
>>3
//<![CDATA[ ... //]]> を忘れてますよん。
5   名前： sevi- ： 2006/08/28（月） 23:49  ID:9J5RKOHs
>>4
うむ.心眼でつけといてくれ.
(旅はどうした)
6   名前： たけ ： 2006/08/28（月） 23:49  ID:6fBsXP3C
今回は別のＰＣから返信させていただいています。

ありがとうございます sevi- 様。
おかげさまで問題が解決いたしました。

ところで、 Pid様 sevi-様
//<![CDATA[ ... //]]>
はどこに挿入すればよろしいのでしょうか？
7   名前： sevi- ： 2006/08/28（月） 23:49  ID:PQukhZTw
あー, んー.
まあ、HTML文書として使うのだろうしそのままでいいので無視してくれて構わないのだが、
こう言うとまたスナフキン（予定）が出てくるので
気になるなら提出した内容を以下のいずれかに変更して使ってくれ.

sevi-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Untitled Page</title>

	<script type="text/javascript">
//<![CDATA[<!--
function calc(fm)
{
	var ten = 0;
	var ele;
	for(e=0; e<fm.elements.length; e++)
	{
		ele = fm.elements[e];
		if(ele.type == "checkbox" && ele.checked)
		{
			ten += Number(ele.value);
		}
	}
	fm.total.value = ten;
}
//-->]]>
	</script>

</head>
<body>
	<form action="#" method="get">
		<input type="checkbox" value="100" onclick="calc(this.form);" />
		<input type="checkbox" value="50" onclick="calc(this.form);" />
		<input type="checkbox" value="20" onclick="calc(this.form);" />
		<input type="checkbox" value="9999" onclick="calc(this.form);" />
		<input type="checkbox" value="1" onclick="calc(this.form);" />
		<input type="text" name="total" />
	</form>
	<form action="#" method="get">
		<input type="checkbox" value="33" onclick="calc(this.form);" />
		<input type="checkbox" value="32" onclick="calc(this.form);" />
		<input type="checkbox" value="111" onclick="calc(this.form);" />
		<input type="checkbox" value="-500" onclick="calc(this.form);" />
		<input type="checkbox" value="22222" onclick="calc(this.form);" />
		<input type="text" name="total" />
	</form>
</body>
</html>
8   名前： sevi- ： 2006/08/28（月） 23:49  ID:PQukhZTw
続き:

もしくは

<html>
<head>
	<title>Untitled Page</title>

	<script type="text/javascript">
<!--
function calc(fm)
{
	var ten = 0;
	var ele;
	for(e=0; e<fm.elements.length; e++)
	{
		ele = fm.elements[e];
		if(ele.type == "checkbox" && ele.checked)
		{
			ten += Number(ele.value);
		}
	}
	fm.total.value = ten;
}
//-->
	</script>

</head>
<body>
	<form action="#" method="get">
		<input type="checkbox" value="100" onclick="calc(this.form);">
		<input type="checkbox" value="50" onclick="calc(this.form);">
		<input type="checkbox" value="20" onclick="calc(this.form);">
		<input type="checkbox" value="9999" onclick="calc(this.form);">
		<input type="checkbox" value="1" onclick="calc(this.form);">
		<input type="text" name="total">
	</form>
	<form action="#" method="get">
		<input type="checkbox" value="33" onclick="calc(this.form);">
		<input type="checkbox" value="32" onclick="calc(this.form);">
		<input type="checkbox" value="111" onclick="calc(this.form);">
		<input type="checkbox" value="-500" onclick="calc(this.form);">
		<input type="checkbox" value="22222" onclick="calc(this.form);">
		<input type="text" name="total">
	</form>
</body>
</html>
9   名前： たけ ： 2006/08/28（月） 23:49  ID:6fBsXP3C
sevi- 様、ありがとうございました。
おかげさまで、目的のものを完成させることができました。


再びお世話になることがあるかもしれませんの、そのときはまた、よろしくお願いいたします。

短いですが、これにて失礼いたします。
一覧へ戻る