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

解決済みの質問

javascript ブラウザ IE動作しません。

よろしくお願いします。
下記記載の javascript なのですが、

ブラウザ IE のみ動作しません。
(Chrome、Firefox、Opera、Safariでは動作するのですが、、、)
どなたかプログラムに詳しい方、教えてください。

【仕様】
自動で金額が計算されるサイズオーダー見積りフォーム。
セレクトタグから商品の種類を選択

テキストフィールドより、縦と横サイズの(数値)を入力

金額計算ボタンを押すとサイズにあわせた金額が自動で計算される

【問題点】
金額計算ボタン onClickを押しても ブラウザIE のみ動作しない(計算されない)
それ以外の alertなどのscriptは IEでも実行されるが計算のscriptが実行されない。

コード記載↓
---

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
</head>
<body>
<h1>サイズオーダー 金額見積フォーム</h1>
<form name="mainForm">
<select name="field1">
<option value="">商品の種類を選択してください</option>
<option value="12000">マットA</option>
<option value="16700">マットB</option>
<option value="16300">マットC</option>
</select>
<p>※サイズをcm(センチメートル)で入力して下さい。</p>
<input type="text" name="field2" maxlength="4" placeholder="たて">cm<br>
<input type="text" name="field3" maxlength="4" placeholder="よこ">cm<br>
<table>
<tr>
<td><input type="button" value="金額計算" id="keisanbutton" onClick="return check()"></td>
<td><output name="totle" id="totle"></output>円(税抜き・送料別)</td>
</tr>
</table>
</form>
<script type="text/javascript">
function check(){
var flag = 0;
var totalPrice = 0;
var text1 = document.mainForm.field2.value;
var text2 = document.mainForm.field3.value;
var price = document.mainForm.field1.options[document.mainForm.field1.selectedIndex].value;
var option = document.mainForm.field1.options;

if( option[0].selected ){
alert('商品の種類を選択してください'); // 種類が選択されていない場合は警告ダイアログを表示
return false; // 計算を中止
}
if(text1.match(/[^0-9]+/)){ // 入力チェック 数値かどうか
flag = 1;
}
else if(text2.match(/[^0-9]+/)){ // 入力チェック 数値かどうか
flag = 1;
}
if(flag){
alert('数字以外が入力されています(半角数字でご入力下さい)'); // 数字以外が入力された場合は警告ダイアログを表示
return false; // 計算を中止
}
if(!text1){
alert('サイズを入力してください'); // 入力されていない場合は警告ダイアログを表示
return false; // 計算を中止
}
if(!text2){
alert('サイズを入力してください'); // 入力されていない場合は警告ダイアログを表示
return false; // 計算を中止
}
if(document.mainForm.field2.value!==""&&( isNaN(text1) || text1<2 || text1>200) ){ // 数値の入力制限
alert("たてのサイズは2cm~200cmまでとなります。(50cm~200cmまでの数値でご入力下さい)");// 制限した入力数値外なら警告ダイアログを表示
return false; // 計算を中止
}
if(document.mainForm.field3.value!==""&&( isNaN(text2) || text2<2 || text2>2000) ){ // 数値の入力制限
alert("よこのサイズは2cm~2000cmまでとなります。(50cm~2000cmまでの数値でご入力下さい)"); // 制限した入力数値外なら警告ダイアログを表示
return false; // 計算を中止
}
else{
//return true; // 計算を実行
totalPrice += Math.round(text1 * text2 * price / 10000);
}
document.getElementById("totle").value = totalPrice
}
</script>
</body>
</html>

---

優れたSE・プログラマーの方、お助け願います m(__)m

投稿日時 - 2018-02-17 11:19:41

QNo.9429915

困ってます

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

function check()の実行まではいけて、それの冒頭のalert();は実行できるけど
計算処理でエラーしているのか、その後の計算結果の出力できないということですね。

outputタグはHTML5で追加されたタグです。
IEのバージョンが明記されていませんが、outputタグに非対応ということかも
しれません。

試しに、
<output name="totle" id="totle"></output>

<span name="totle" id="totle"></span>

document.getElementById("totle").value = totalPrice;

document.getElementById("totle").innerHTML = totalPrice;

とされてはどうでしょう。

投稿日時 - 2018-02-17 13:24:16

お礼

ありがとうございます。

ご指摘通りで、動作確認することが出来ました。

非常に勉強になりました。

投稿日時 - 2018-02-18 08:28:55

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

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

回答(2)

ANo.2

IEなどで動かなくていいと思いますが…

いろいろおかしいです。あなたはHTML4.01を宣言しています。outputはHTML5からですので、使用できない要素を指定していることになります。またそもそもIEではoutputは対応していないようです。IEでも動くようにしたいのであれば、outputなどの新しい要素は使ってはいけません。

outputをspanやdiv等に変更して
# document.getElementById("totle").innerText = totalPrice;
とするのがいいと思いますよ。

投稿日時 - 2018-02-17 13:37:33

お礼

ありがとうございます。

ご指摘通りで、動作確認することが出来ました。

非常に勉強になりました。

投稿日時 - 2018-02-18 08:29:20

あなたにオススメの質問