• 締切済み

IE以外のブラウザへの対応方法がわかりません。

はじめまして。 初めて質問させていただきます。 <form> <div id> ~ </div> <input></form> (内容省略) 上記のform内のimgクリックした時に、同画面の別の場所に、クリックしたimgを表示させるjavascriptを作ったのですが、IE以外のブラウザの場合、imgを選択しても別の場所に表示させることができません。 どうもcreateElementのあたりで動作しなくなっているようなのですが、対処方法がわからなくて困っています。 どなたか対処方をご教示願えませんでしょうか? よろしくお願いいたします。 下記が作成したjavascriptです。 <script language="javascript" type="text/javascript"> <!-- var hensOne = document.getElementById('chara_default').value; function seticon(gazo) { var hensTwo = document.getElementById('dhtmledit'); var hensThree="<img style=\"width:50;height:50;\" src=\"/blog/img/mychara/"+icon+".gif\">"; //--ここからが対応していないと思われる箇所です-- var hensFour = document.createElement('div'); var hensFive = document.createElement(hensThree); if( navigator.userAgent.indexOf("MSIE")!=-1 ){ document.entryForm2.kao.value =gazo; hensFour.appendChild(textNode); hensFour.id = 'dhtmledit'; hensFour.onkeyup = 'count_len(dhtmledit)'; hensTwo.parentNode.replaceChild(hensFour, hensTwo); } } //--> </script>

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

全体像が不明なので、よくわかりませんが… gazoの引数の内容は何か、iconってどこで値が決まっているのか、hensThree・hensFiveは何のための変数か(使っていない)とかいろいろありますけど、 >IE以外のブラウザの場合、imgを選択しても別の場所に表示させる >ことができません。 とりあえず、  if( navigator.userAgent.indexOf("MSIE")!=-1 ){ ~~ } で、IEだけ選択してreplaceChildしてるから、というのが直接の原因では? でも、目的が表示画像の内容を変えるだけなら、エレメントをわざわざ作らなくても、hensTwoのsrcを変更してあげればいいだけなのでは?  document.getElementById('dhtmledit').src="/blog/img/mychara/"+icon+".gif"; とか… 意味が違ってたら失礼。

03gtc003
質問者

お礼

fujillin様 返事が遅くなりまして、大変申し訳ありません。 不十分な説明なうえ、ご回答していただきまして、まことにありがとうございます。 fujillin様のご教示通り、 if( navigator.userAgent.indexOf("MSIE")!=-1 ){ ~~ } の箇所が原因で、ifをはずして、細かい修正を行ったことで、MSIE以外のブラウザへの対応が可能になりました。本当にありがとうございます。 そこで、この記述を参考に、ブログの絵文字のような機能をつくりたいと思っています。 その点につきまして、「ブログの絵文字のような機能をつくりたい…。」という質問タイトルで再度質問をさせていただいております。 お忙しい中だとは思いますが、ご教示はもちろんのこと、閲覧だけでもしていただけたら幸いです。 本当にありがとうございました。

関連するQ&A

  • 記述方法について

    よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる           くま  さる ごりら  これらを→ごりら うま  うま           りす りす というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか? 以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){   var tr = document.createElement("tr");   trs[0] = document.createElement("tr");   trs[1] = document.createElement("tr");   trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名(うさぎ・とり)を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • Firefoxで表示できないのは何故でしょう?

    お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした(><) 何か見落としがあるのでしょうか? <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・

  • 入力された文字列からリンクタグを生成

    お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ( aタグ等 )が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。

  • jsでプルダウンで選択したものがうまく表示されない

    以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素1を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

  • JavaScriptで画像に連動してテキストの内容

    ジャバスクリプトを使って3枚の画像をクリックで入れ替え(ここまではできています。)その画像に連動した形で写真下のテキストフィールド内の文字を変えたいのですが、やり方がわかりません。 クリックで画像と同時に変えるにはなにかテクニックがいるのでしょうか?(withなんてのがあったんですが、これを使えば良いのでしょうか? <script language="javascript"> var no=1; var su=3; var text11=1; function func3() { var img1 = document.getElementById('img1'); no++; if (no>su){ no=1; } var gazo='s5_'+no+'.jpg'; img1.src=gazo; } </script> <img src="s5_1.jpg" width="320" height="481" hspace="125" vspace="10" id="img1" onclick=" func3();" /> <div class="syasinnsita"> <textarea name="text11" cols="78" id="text11">写真をクリックしてください。解決法を指南します</textarea>

  • クリックとダブルクリック

    HPをつくっています。1つの枠内で4つの画像を用意し、クリックによって選択させたあと、選択した画像の動画の上でダブルクリックすると動画を再生する処理を考えているのですが、 ダブルクリックしたにも関わらず、画像が2回クリックした時と同じように先に進んでしまう。(例えば、Bを再生しようとダブルクリックするとDが再生される) どう対処したらいいか見当が付きません。宜しくお願いします。以下、参考までにソース添付。 <html> <head> <script type="text/javascript"> var IMG=new Array(); IMG[1]=new Image();IMG[1].src="gazo/kao1.jpg"; IMG[2]=new Image();IMG[2].src="gazo/kao2.jpg"; IMG[3]=new Image();IMG[3].src="gazo/kao3.jpg"; IMG[4]=new Image();IMG[4].src="gazo/kao4.jpg"; var EIZO=new Array(); EIZO[1]="eizo1.avi" EIZO[2]="eizo2.avi" EIZO[3]="eizo3.avi" EIZO[4]="eizo4.avi" var a="";var cnt=0; function kawaru(){ if(cnt==4){ cnt=1; } else{ cnt+=1; } document.getElementById("test").src=IMG[cnt].src; v_na=EIZO[cnt]; } function saisei(){ window.scroll(0,0); var v_html; v_html='<embed src="http://HPurl/'+v_na+'" border="1" width="805" height="417" ShowControls="0"></embed>' document.getElementById("koko").innerHTML=v_html; } </script> </head> <body> <span id="koko"></span> <img id="test" src="gazo/ojisan2.png" onClick="kawaru()" ondblClick="saisei()"> </body> </html>

  • 画面が遷移したみたいになってしまいます。

    画面ロード後にjavascriptで動的にまたjavascriptタグを表示しています。 以下のjavascriptを組み込んでみたところ、取得したjavascriptを表示したときに画面遷移したみたいになってしまいました。 どうすればきちんと表示されるようになるでしょうか。 <div id="position"></div> <script language="javascript">// <!-- var timer = setInterval("Timer()", 1000); function Timer() { var position = document.getElementById('position'); var script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute('src', 'http://hogehoge/getjs'); position.appendChild(script); clearInterval(timer); } // --></script> http://hogehoge/getjsからはコンテンツの部品を表示するjavascriptが入っています。

  • function処理後、IE以外初期化されてしまいます

    以下のスクリプトでドロップダウンから「フランス」を選ぶと正解と表示され、alertも出ます。 その後、IEでは表示された内容で、ドロップダウンの選択された状態が残るのですが、firefox,opera,safariともreloadされたように初期化されてしまいます。 どうしたら初期化されないように出来るでしょうか。 <html> <head> <script type="text/javascript"> <!-- var seikai = new Array(0,10,2,7,12,14,6,16,15,3,9,11,4,5,13,8,1); var msg_text = ""; var kotae = new Array(); function check1(){ seikai_count = 0; kotae=""; for(i=1;i<2;i++){ if(seikai[i]==document.getElementById("q"+i).value) seikai_count++; } msg_text = seikai_count + " 問正解です"; document.getElementById("msg").innerHTML = msg_text; alert(msg_text); return; } // --> </script> </head> <body> <form name="quiz"> <select id="q1"> <option value="0">---- <option value="1">アラビア <option value="2">スウェ-デン <option value="3">スペイン <option value="4">タイ <option value="5">ドイツ <option value="6">トルコ <option value="7">ビルマ <option value="8">ヒンディー <option value="9">フィリピン <option value="10">フランス <option value="11">ベトナム <option value="12">ペルシャ <option value="13">ポルトガル <option value="14">モンゴル <option value="15">ルーマニア <option value="16">ロシア </select> <div id="msg"></div> <button onclick="javascript:check1();">正解数をみる</button> </form> </body> </html>