javaスクリプトがＩＥ以外のブラウザで動作しない

2023/09/06 11:56

このQ&Aのポイント

javaスクリプトを使って、フォームのチェックボックスにチェックを入れるとそれ以降のフォームの項目(セレクト)が機能しない現象が発生しています。
ＩＥ以外の全てのブラウザで機能しないため、ブラウザの設定ではない原因と考えられます。
javaスクリプトは外部リンクで、ＨＴＭＬのhead内に記述されています。

ベストアンサー

javaスクリプトがＩＥ以外のブラウザで動作しない

2016/08/01 17:33

はじめまして、初心者です。javaスクリプトを使って、フォームのチェックボックスにチェックを入れるとそれ以降のフォームの項目(セレクト)が機能するようにしたのですが、なぜかインターネットエクスプローラーでしか動作しません。１．ＩＥ以外の全てのブラウザで機能しません。(ＩＥだけ動作します) ２．原因はブラウザ側の設定ではないようです。(各ブラウザで確認済み) ３．javaスクリプトは外部リンクです。ＨＴＭＬでの記述場所はhead内４．ＨＴＭＬ内の外部リンク記述内容↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-type" content="text/css" /> <meta http-equiv="Content-Script-type" content="text/javascript" /> <script type="text/javascript" src="./order1.js"></script> </head> ５．フォームの記述内容↓ <form id="order" name="名前" method="post" action="http://www.---" enctype="----"> <input type="checkbox" name="choice" value="名刺　" id="a1" onclick="choice_goods();" /> <select name="choice_a1_1" id="a1_1" disabled="false"> <option value="01ホワイト">No,01ホワイト</option> <option value="02レッド">No,02レッド</option> <option value="03ブルー">No,03ブルー</option> <option value="04ブラック">No,04ブラック</option> </select> <select name="choice_a1_2" id="a1_2" disabled="false"> <option value="100枚">100枚</option> <option value="200枚">200枚</option> <option value="300枚">300枚</option> <option value="400枚">400枚</option> </select> </form> ６．javaスクリプトの記述内容↓ // Java Document function choice_goods(){ if (document.order.a1.checked) { document.order.a1_1.disabled = false; } else { document.order.a1_1.disabled = true; } if (document.order.a1.checked) { document.order.a1_2.disabled = false; } else { document.order.a1_2.disabled = true; } } ●以上です。当方javaに限らずプログラム自体が初心者でとんでもない間違いを犯しているのかもしれませんが、ブラウザのＩＥでは問題なく動作しているだけに逆にどこが悪いのか調べるのが困難です。プログラムにに詳しい友人に相談したのですが、特に悪い箇所も無くまさに原因不明だそうです。大変困っていますどうかよろしくお願いいたします。 ※上記の内容では判断できかねる場合は申してください。

gelatineg
お礼率0% (0/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

t_ohta
ベストアンサー率38% (5085/13290)

2016/08/01 18:01 回答No.1

デバッグを行う際は、各ブラウザの開発者ツールなどと呼ばれる機能を活用しましょう。そこにはエラーメッセージ等、有用な情報が表示されています。「document.order.a1.checked」といった形でオブジェクトを指定していますが、この場合 document に続くオブジェクト名は name 属性で指定されたモノを使用しなければいけません。（id 属性が使えるのは IE 独自仕様です） HTML では id 属性が「order」、name 属性が「名前」となっている為、document.order という名称のオブジェクトが見つからないためエラーになっています。なので、「<form id="order" name="order" method="post" action="http://www.---" enctype="----">」とすれば動作するでしょう。あと、「Java」と「JavaScript」は全く異なるプログラミング言語ですので混同しないようにしましょう。

関連するQ&A

IE以外のブラウザで対応するには
超初心者です、見よう見まねで以下のような、セレクト1を選ぶとセレクト2は「選択」(2を選べばその逆）になる外部javascriptとhtmlを作ってみました。IEでは動く（option valueにリンクする）のですが他（サファリやファイアーフォックス）では全く動きません。どこか変なところがあるのでしょうか？それともIE以外では諦めなければならないでしょうか？ご教授の程、よろしくお願い致します。 #外部javascript（ファイルネーム　select.js） var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() { parent.myNew.location.href=document.Link1.select1.options.value; 　　Sel=document.Link1.select1.selectedIndex; 　　Ms=document.Link1.select1.options[Sel].value; reSel(document.Link1.select1); } function B_Li() { parent.myNew.location.href=document.Link1.select2.options.value; 　　Sel=document.Link1.select2.selectedIndex; 　　Ms=document.Link1.select2.options[Sel].value; reSel(document.Link1.select2); } #以下　HTMLソース <script src="./select.js" type="text/javascript" ></script> <FORM name="Link1"> <select name="select1" onChange="A_Li()"> <option value= new.html selected>選択</option> <option value= aaa.html>aaa</option> <option value= bbb.html>bbb</option> <option value= ccc.html>ccc</option> </select> <select name="select2" onChange="B_Li()"> <option value= new.html selected>選択</option> <option value= ddd.html>ddd</option> <option value= eee.html>eee</option> <option value= fff.html>fff</option> </select> </FORM >
- ベストアンサー
- JavaScript
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
- ベストアンサー
- JavaScript
セレクトの内容に応じてラジオボタンを自動選択する方法
<script type="text/javascript"> function selectChange(){ var selectedNum = document.form1.Q1.selectedIndex; if(selectedNum == 0 | selectedNum == 1) { document.formGeneratorForm1.Q2[0].disabled=false; document.formGeneratorForm1.Q2[1].disabled=false; }else{ document.formGeneratorForm1.Q2[0].disabled=true; document.formGeneratorForm1.Q2[1].disabled=true; } } </script> <select name="Q1" onchange="selectChange()"> <option value="0" selected >AAA</option> <option value="1" >BBB</option> <option value="2" >CCC</option> </select> <input type="radio" name="Q2" value="0" />000 <input type="radio" name="Q2" value="1"　checked/>111 上記のソースでQ1でCCCを選択した時に、Q2で000を選択していたとしても111に自動的にチェックを入れる方法をご教授下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
jQuery if文の条件分岐 (。ノдヽ。)
セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが、条件がうまく設定できずに困っています。入力不可にはなるのですが、どうしても2012年8月以外の月でも入力不可になってしまいます。どなたか、お知恵を貸して下さい(*_ _) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> </head> <body> <script type="text/javascript">  </script> <table> <tr> <td bgcolor="#ffffff"> <select size="1" name="depyear"> <option value="2012">2012</option> <option value="2013">2013</option> </select> 年 <select size="1" name="depmonth"> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> 月 <select size="1" name="depday"> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> 日</td> </tr> </table> </body>
- ベストアンサー
- JavaScript
DOCTYPE宣言とjavascript
United Statesを選んだ場合、州を選択。それ以外の国の場合はtextフィールドで県なりを直接書き込むと言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、良い書き方が解りません。どなたかご教授願えますでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算をプルダウンメニューで選択し、３つ目のテキストボックスに計算結果を表示するにはどのようにしたらよいのでしょうか？とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript">  </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが動かなくて困り果ております。初心者です。御指南のほど、どうぞ宜しくお願いします。 ■　編集ソース <html> <head> <title>テスト</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" onchange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1（500円）</option> <option value="1000">タイプ2（1,000円）</option> <option value="1500">タイプ3（1,500円）</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
ＨＴＭＬのコンボボックスとの関連
ＨＴＭＬの同ページ内にコンボボックスＡとコンボボックスＢがあるとして、  <script language="javascript">  </script>  <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとＢボックスが選択出来なくなり、Ｂボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか？ちなみに、ＡボックスＢボックス両方がきちんと選択されている場合はエラーは起きません。
- ベストアンサー
- JavaScript
複数のvalue値を返すには
Ａを選択した時10、Ｂを選択した時100、Ｃなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、Ａの時10と20を、Ｂの時100と200、Ｃの時1000と2000がもうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript">  </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">Ａ</option> <option value="100">Ｂ</option> <option value="1000">Ｃ</option> </select> </form>
- ベストアンサー
- JavaScript
同じようなのばかりだ申し訳ないのですが…javaに関してです。
以下のようなプログラムを作成しました。３つのスクリプトを動作させたいのですがどうすればよいですか？また，画像のように(1)～(3)の和を算出するにはどうすればいいですか？助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select>　　 <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select>　　 <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>
- ベストアンサー
- Java