ジャバスクリプトで自動計算表を作ったのですが、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
No.2ベストアンサー
- 回答日時:
う~~ん。
それで通じるってのはある意味すごいですね。要素の指定方法を「名前.名前」方式でなくせば、一般的な指定方法になるのでいけるのでは?
var elem = document.forms['form1'].elements['要素名'];
みたいな感じ。
毎回長い記述をするのが面倒なら、はじめに
var f = document.forms['form1'].elements;
としておいて、
f['要素名']
で取得できます。(withとかでも良いかも)
とりあえずそれでいけることはいけるみたいですが、name属性はアルファベットで開始し、英数(といくつかの記号)で記述することを強くお勧めします。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …
あと、関数の呼び出し側には引数がありますが、結局使っていないみたいなので、いらないのでは?
テーブルも表以外に用いるのは、勧められていないようですし…
なんとなく全体に同じものが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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
document.form で nullまたは...
-
javascriptでselectボックスの<...
-
セレクトの値を取得できない
-
Selectの中身をfor文で入れる
-
javascriptでプルダウンメニュ...
-
selectタグに直接onChangeを書...
-
jQuery セレクトボックスで選択...
-
DBの値を利用して、3つの連動し...
-
セレクトメニューで選択された...
-
ラジオボタンとドロップダウン...
-
リストボックスの項目の順番を...
-
CSVファイルを読みこみ、プルダ...
-
onchangeイベントを強制的に発...
-
プルダウン選択を変更すると、...
-
return trueとreturn falseの用...
-
チェックボックスのON/OFFでVal...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
jQuery セレクトボックスで選択...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
JQuery selectが反映されない
-
セレクトの値を取得できない
-
セレクトを全て選択されていな...
-
セレクトメニューで選択された...
-
ブラウザの戻るボタンを押した...
-
javascriptでselectボックスの<...
-
リストボックスの項目の順番を...
-
現在時刻を取得してフォームのs...
-
onFocusOutが複数回呼ばれる!
-
セレクトボックスで現在選択さ...
-
【javascript・PHP】プルダウン...
-
document.form で nullまたは...
-
プルダウンで現在の年月日を取...
-
onchange等のイベントハンドラ...
おすすめ情報