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

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

解決済みの質問

ジャバスクリプトで自動計算表を作ったのですが、IEでは動くのですが、フ

ジャバスクリプトで自動計算表を作ったのですが、IEでは動くのですが、ファイヤーフォックスでは動きません。どこに不具合があるのでしょうか?

問題のフォームはこちらです
http://tatamitai.com/form1-11.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>メールフォーム</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<META name="description" content="メールフォーム">
<META name="keywords" content="メルマガ,ホームページ,サイト制作">

<script type="text/javascript">
<!--

function keisan(){

// 設定開始

// 商品1


var price1a = 3680;
var price1b = document.form1.格安コース:数.selectedIndex * 1; // 単価を設定
var price1c = document.form1.格安コース:工期等課金.value * 1; // 単価を設定
var price1d = document.form1.格安コース:柄.value * 1; // 単価を設定
var price1e = document.form1.格安コース:シート.value * 1; // 単価を設定
var price1f = document.form1.格安コース:乾燥.value * 1; // 単価を設定
var total1 = document.form1.格安コースの小計.value = (price1a + price1c + price1d + price1e + price1f) * price1b; // 小計を表示

// 商品2
var price2a = 4900;
var price2b = document.form1.標準コースA:数.selectedIndex * 1; // 単価を設定
var price2c = document.form1.標準コースA:工期等課金.value * 1; // 単価を設定
var price2d = document.form1.標準コースA:柄.value * 1; // 単価を設定
var price2e = document.form1.標準コースA:シート.value * 1; // 単価を設定
var price2f = document.form1.標準コースA:乾燥.value * 1; // 単価を設定
var total2 = document.form1.標準コースAの小計.value = (price2a + price2c + price2d + price2e + price2f) * price2b; // 小計を表示


// 合計を計算
var total = total1 + total2;

// 設定終了


document.form1.合計.value = total; // 合計を表示

}

// -->
</script>


<STYLE type=text/css>
<!--
A:link {
FONT-SIZE: 10pt; COLOR: #ff0000; TEXT-DECORATION: none
;}
A:visited {
FONT-SIZE: 10pt; COLOR: #ff0000; TEXT-DECORATION: none
;}
A:active {
FONT-SIZE: 10pt; COLOR: #ff0000; TEXT-DECORATION: none
;}
A:hover {
FONT-SIZE: 10pt

投稿日時 - 2010-03-10 18:59:23

QNo.5741246

すぐに回答ほしいです

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

う~~ん。 それで通じるってのはある意味すごいですね。

要素の指定方法を「名前.名前」方式でなくせば、一般的な指定方法になるのでいけるのでは?
 var elem = document.forms['form1'].elements['要素名'];
みたいな感じ。

毎回長い記述をするのが面倒なら、はじめに
 var f = document.forms['form1'].elements;
としておいて、
 f['要素名']
で取得できます。(withとかでも良いかも)
とりあえずそれでいけることはいけるみたいですが、name属性はアルファベットで開始し、英数(といくつかの記号)で記述することを強くお勧めします。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#type-cdata

あと、関数の呼び出し側には引数がありますが、結局使っていないみたいなので、いらないのでは?
テーブルも表以外に用いるのは、勧められていないようですし…

なんとなく全体に同じものが2つある構成だし計算はほぼ単純合計なので、商品1と2で同じ計算を別個に書かなくても良さそうだし、グルーピングさえしておけばそれぞれの項目の名前に頼る必要もないのでは?
以下、ご参考までに。

<script type="text/javascript"><!--
function calc(n) {
var g = document.getElementById('group' + n);
var s = g.getElementsByTagName('SELECT');
var i, t = (n==1?3680:4900) * s[0].value;
for (i=1; i<s.length; i++) t += 1 * s[i].value;
g.getElementsByTagName('INPUT')[0].value = t;
}
--></script>

<form name="form1">
<div id="group1">
格安 3,680円
<select name="格安コース_数" onChange="calc(1)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="格安コース_工期等課金" onchange="calc(1)">
<option value="0">選択→</option>
</select>
<select name="格安コース_柄" onchange="calc(1)">
<option value="0">選択→</option>
</select>
<select name="格安コース_シート" onchange="calc(1)">
<option value="0">選択→</option>
</select>
<select name="格安コース_乾燥" onchange="calc(1)">
<option value="0">選択→</option>
</select>
<input type="text" name="格安コースの小計" size="8" value="0"> 円
</div>
<div id="group2">
 ・・・・・
</div>
</form>

投稿日時 - 2010-03-10 20:52:58

お礼

ありがとうございます。助かりました。

投稿日時 - 2010-03-10 22:18:15

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

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

回答(2)

ANo.1

おそらく不具合ではなく,Tridentにしか対応していないのだと思います。
Gecko,Webkit,Prestoエンジンで試してみましたが,全部ダメでした。
「Internet Explorer 7.0以上でご覧下さい。」とでも書いとけばいいでしょう。
IE持ってない人はそうそういないとおもうので....

投稿日時 - 2010-03-10 19:26:59

お礼

ありがとうございました。

投稿日時 - 2010-03-10 22:19:06

あなたにオススメの質問