• ベストアンサー

この「Javascript」が機能しないのはなぜでしょうか?

あるサイトにJacascriptで動くボタンがあります。 しかしこのボタンが動作しないPCがあり、とても困っています。 2台のPCがありまして、同じブラウザFirefox3.0.7を入れております。どちらもJacascript機能を「有効」にしています。 しかし片方が正常に動くのに、片方はエラーはでずステータスバーに「完了」と表示されるのですが正常に動きません。 スクリプトとブラウザどちらに問題があるのでしょうか?(ブラウザでしょうか?) ちなみにIE7とoperaでは正常動作しました。 ちなみにソースは、 ■mycard.js function addMyCard(id){ var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest(); } else if (window.ActiveXObject){ try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { request = new ActiveXObject('Microsoft.XMLHTTP'); } } else { // no support } if(navigator.userAgent.indexOf("Firefox") != -1){ request.onload = function() { if (request.readyState == 4 && request.status == 200){ if (request.responseText == 'true'){ document.getElementById('mycard_add'+id).style.display = 'none'; document.getElementById('mycard_list'+id).style.display = 'block'; } } }; } else { request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200){ if (request.responseText == 'true'){ document.getElementById('mycard_add'+id).style.display = 'none'; document.getElementById('mycard_list'+id).style.display = 'block'; } } }; } request.open('GET', './mycard2.php?id='+id+'&mode=add', true); request.send(null); if(navigator.userAgent.indexOf("Firefox") != -1){ request.onload = function() { if (request.readyState == 4 && request.status == 200){ window.location.reload(); } }; } else { request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200){ window.location.reload(); } }; } } ■HTMLファイルのほうは <dt> <div id="mycard_add100"><a href="javascript:void(0);" onclick="addMyCard(100)"><img src="images/contents/btn_mycard.jpg" width="90" height="20" alt="Myカード追加" /></a></div> <div id="mycard_list100" style="display:none;"><a href="mycard_list.php"><img src="images/btn_mycard2.jpg" width="90" height="20" alt="Myカード" /></a></div> </dt> といった感じです。 スクリプト自体は友人が書いたもので私は全然分からないので もし誤りがある場合は、どの部分か教えていただければ幸いです。 よろしくお願い致します。

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

  • ベストアンサー
回答No.2

request.send()したあとで、もう一度onload、onreadystatechangeを書き換えてますが、 これを両方消すとどうなるでしょうか。 IEでもonloadではなくonreadystatechangeを使えますよ。 たしか、Opera8.02はonloadが使えなかった気がします。(XMLHttpRequestに対応しています) SleipnirなどでGeckoエンジンを使用していると、 navigator.userAgentに"Firefox"の文字が出てきませんので、"Gecko"で調べるようにした方が良いです。 ただし、Safariなども"like Gecko"ですので.indexOf("Gecko")としていたら間違った判定になる可能性もあります。 このへん、かなり複雑になってきてますね。 質問文に書かれている内容だけなら、 "Firefox"かどうかを調べるif文を消して、"else"の所だけを全てのブラウザで使うようにしても大丈夫だと思います。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

noname#119508
noname#119508
回答No.3

if(navigator.userAgent.indexOf("Firefox") != -1){ から if(navigator.userAgent.indexOf("Gecko/") != -1){ に変えたほうが良いかと if(navigator.userAgent.indexOf("Gecko") != -1){ だとSafari系(WebKit)がGeckoに偽装しているので、Geckoと認識してしまうため if(navigator.userAgent.indexOf("Gecko/") != -1){ が一番良いと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

その友人さんには問い合わせないの? まあそれはさておき 同じOS同じブラウザで片方が動かないなら クライアントを疑うべきね。 どっちが悪いかは判らないけど。 3台目があれば多数決かしらね。 とりあえず、動くのが正しいとしていて 動かないのはクライアントに問題があると思うべきよ。 原因は ・一時キャッシュの破損 ・常駐ツールが邪魔している とかいろいろ考えられるけど。 とりあえず簡単にできるのは 一時キャッシュ等の削除かしら。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示/非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • style.displayだと効率悪いから...

    style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • javascriptで困っています。教えてください

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか?よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

  • JavaScriptで時間指定をして表示を切り替え

    JavaScriptで時間指定をして表示を切り替えたいのですが safariだけうまく動作しません、下記のjsファイルを読み込んでHTML側には <div id="hoge1">切り替え前の内容</div> <div id="hoge2">切り替え後の内容</div> としています。 解決策があればご教授お願い致します。 window.onload = changeDisplay; function changeDisplay(){ var objDate = new Date(); var now = objDate.getTime();//現在のタイムスタンプ(ミリ秒)を取得 var changeTime = new Date("Jan 1, 2011 00:00:00");//切り替える日時のタイムスタンプ(ミリ秒)を取得 //切り替え前 if (now < changeTime) { document.getElementById('hoge1').style.display = "block"; document.getElementById('hoge2').style.display = "none"; setTimeout("changeDisplay()", 1000);//1秒ごとに実行(◯秒ごとの場合は、第2引数に 「◯ * 1000」 と記述) //切り替え後 } else { document.getElementById('hoge1').style.display = "none"; document.getElementById('hoge2').style.display = "block"; } }

  • クリックで特定のdiv要素が表示されるJavascriptに追加機能を

    クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト(id="link-1")の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか? 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。

  • FlashからJavascriptを動作させるには?

    FlashからJavascriptを動作させるには? よろしくお願い致します。 以下のようなJavascriptのコードがあります。 リンクをクリックすると隠れている領域(div)が表示されるというものなのですが、 このリンクをFlashにして動作させたいと思っています。 その場合、どのようなコードをFlashに記入すればよいのでしょうか? ■Javascriptのコード(外部jsにしています) function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } ■HTMLのコード <a href="#hoge" onclick="showHide('hoge');return false;">隠れている領域を表示</a> <div id="hoge" style="display:none;"> </div> 説明不足のようでしたら、補足説明致します。 どうぞご教授下さいますようお願い致します。

    • ベストアンサー
    • Flash
  • javascriptでボックスの表示非表示

    javascriptでボックスにマウスオーバーすると、同じ位置に別のボックスを表示させたいと考えています。 以下のようにしてみましたが、ie9ではできたのですが、 ie6、ie7、ie8ではdiv1とdiv2が横に並んでしまいました。 何か解決方法があれば教えてください。 よろしくお願いいたします。 <script type="text/javascript"> window.onload = function() { div1 = document.getElementById("div1"); div2 = document.getElementById("div2"); div1.onmouseover = function() { div1.style.display = "none"; div2.style.display = "block"; }; div2.onmouseout = function() { div1.style.display = "block"; div2.style.display = "none"; }; div1.style.display = "block"; div2.style.display = "none"; }; </script> <div id="div1" class="box01"> <div id="pic"><img src="image01.gif"></div> <div id="txt">てきすとてきすと</div> </div> <div id="div2" class="box02"> <div id="pic"><img src="image02.gif"></div> <div id="txt">てきすとてきすと</div> </div>

  • javascriptがIEで機能しない

    ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択1"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択1</option> <option>選択2</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択1を選択しても非表示のままです どこを修正してやればいいでしょうか? ぜひ御指南ください。