• ベストアンサー

全てのリンクがtwitterを指すようになる

おねがいします。 今JavaScriptを使ってiframeの中にそれぞれのリンクを読み込もうとしているのですが、 その全てのリンクが、特定のリンク(twitter.com)を指すようになってしまいます。 ソースは以下です ------------------------------------------- var loaded_document = false; var linksId = { 'scripts': { 'showed': 0 }, 'cgi': { 'showed': 0 }, 'blog': { 'showed': 0 }, 'twitter': { 'showed': 0 } }; function runOnLoad() { if (loaded_document) return; for (var id in linksId) { linksId[id].url = document.getElementById(id).firstChild.href; document.getElementById(id).firstChild.href = 'javascript:void(0);'; addHandler( function () { alert('clicked ' + id); loadOnClick(id); }, document.getElementById(id), 'click' ); } loaded_document = true; } ------------------------------------------- このrunOnLoadがonloadの時に呼ばれるのですが、 どのリンクをクリックしても"clicked twitter"と表示されてしまいます。 クロージャ・・・?と思ったのですがJavaScriptに詳しくないのでよくわかりません。 誰か御教授くださいm(_ _)m

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

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

同様の質問が先日ありました。 以下をご参考に。(ほとんど同じ内容です)  http://oshiete1.goo.ne.jp/qa4745251.html

kirikirkaz
質問者

お礼

解決しました!! ありがとうございましたm(_ _)m

その他の回答 (2)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.3

判れば単純、ああなるほどってなるものなんだけど 結構みんな悩むのよね。 あなたのコードを別の書き方をするとこうなるのよ。(ざっくり省略) function runOnLoad() { for (var id in linksId) { } } </script> <a href="#" onClick="alert('clicked ' + id);">なにか</a> onClickのコードはあくまでそのまま実行されるの。 idの値がtwitterになってしまうの判るわよね。 解決方法はいろいろあるけど 私ならオブジェクトにidの値を覚えさせるわ。 for (var id in linksId) { linksId[id].url = document.getElementById(id).firstChild.href; document.getElementById(id).firstChild.saveid = id; document.getElementById(id).firstChild.href = 'javascript:void(0);'; addHandler( function () { alert('clicked ' + this.saveid); loadOnClick(this.saveid); }, document.getElementById(id), 'click' ); } 言いたいことが伝わるといいんだけど。 ちなみに動作確認していないので注意。

kirikirkaz
質問者

お礼

おぉ!! document.getElementById(id).firstChild.saveid = id; なんてことができるんですか!!! HTML(DOM?)を直接いじるようでできないのかと思ってました。 こちらで確認したところ alert(this.firstChild.saveid); でちゃんと動きました。 HTMLの方をちゃんと見せなくてすいませんでした。 2度も教えて頂いてありがとうございましたm(_ _)m

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

原因はシンプルよ。 addHandler内で設定している変数「id」だけど、 設定時は確かにforでまわしているように見えるわ でもね、実行時はforループはすでに終了してしまっているの。 つまり、idはlinksIdの一番最後の値になっているわけ。 結果的にidは常に'twitter'になってしまっているのよ。

kirikirkaz
質問者

お礼

なるほど! でもidってfor文で回す度に新しく生成されるんじゃないんですか・・・? とりあえずfor文の初めに var id_copied = new String(id); としてidをid_copiedの代わりに使いまわしてみましたが変わりません。。。 基本型と参照型の違いがよく分かってないように思います。。。 どうすればいいんでしょうか?

kirikirkaz
質問者

補足

↓間違えました id_copiedをidの代わりに の間違いでした

関連するQ&A

  • リンクの無効化/有効化 の切り替え

    いつもお世話になっております。 login.jsp A.jsp B.jsp C.jsp という画面があり、ログイン画面以外の画面上部に以下のようにリンクを張り付けております。 <a id="AH" href="A.jsp" onClick="Aheader()">A画面へ</a> <a id="BH" href="B.jsp" onClick="Bheader()">B画面へ</a> <a id="CH" href="C.jsp" onClick="Cheader()">C画面へ</a> ログイン画面でログインに成功すると、A.jspへ遷移します。 (1)A画面へ遷移した後、『A画面へ』のリンクを無効化 『B画面へ』をクリックすると、 (2)B.jspへ遷移し、『A画面へ』のリンクを有効化・『B画面へ』のリンクを無効化 (C画面も(2)と同じ仕組み) ---------Script--------- window.onload = function() { var element = document.getElementById("AH"); element.removeAttribute("href"); } function Aheader() { var element = document.getElementById("AH"); element.removeAttribute("href"); } function Bheader() { var element = document.getElementById("BH"); element.removeAttribute("href"); } function Cheader() { var element = document.getElementById("CH"); element.removeAttribute("href"); } ------------------------------------ これを実行すると、確かに無効化はされますが、有効化が出来ていない状態です。(hrefが削除されたままなので・・・) ですので、setAttribute を使えば出来そうだと考えたのですが、うまく動きませんでした。 ぜひ皆様の知恵をお借りしたく質問させていただきました。 よろしくお願いいたします。

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • リンクを新しい窓で開きたい

    ページ内の外部リンクのみ、新窓で開きたいなと考え、『javascript 新窓』で検索した際に見つけた方法にID指定というものがありました。試してみたところ、一つ目のIDしか反映されませんでした。記述方法を変えれば、複数IDを指定することが可能なのでしょうか? ご指南お願い致します。 #HTML例 ###################### <p id="sample"> <a href="sample.html">サンプル1</a> </p> <p id="sample2"> <a href="sample2.html">サンプル2</a> </p> #script記述例 ###################### window.onload = getSrc; function getSrc() { var x = document.getElementById('sample','sample2').getElementsByTagName('a'); for (var i=0; i<x.length; i++) { x[i].onclick = function () { return openWin(this.href); } x[i].onkeypress = function () { return openWin(this.href); } } } function openWin(target) { open(target); return false; }

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 (一番下に全ソースを貼りました。見づらくて申し訳ありません。) htmlに複数の似た名前のボタンがあります。 名前:button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。  ・0~9のイベントは正しく登録されている。  ・しかし、全てがchecked(10)を呼んでいる 質問1  これを回避する方法と、その対処理由を教えて頂きたくお願い致します。   質問2(オプション)  参考になる資料を教えていただければ幸いです。  例)サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。 */ for (i=2; i<4; i++) {    document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

  • リンクをクリックしたときの表示位置について

    リンクテキストをクリックすると、<style="display:none;">を指定して 隠しているテキスト群を表示させるJavascriptを使用しています。 リンクテキストがページ全体の中央くらいにあるのですが、クリックしてテキスト群を表示させると、テキスト群が表示されると同時に一番上までページの表示位置が移動してしまいます。 ページの表示位置を変えずに、隠れているテキスト群を表示させるにはどうしたらよいのでしょうか? お分かりになる方がいらっしゃいましたらお教え下さい。 よろしくお願い致します。 使用しているソースです。 <script type="text/javascript"> <!-- function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } // --> </script> <a href="#" onClick="show('sub1')">テキストリンク</a> <!--隠れているテキスト群--> <ul id="sub1"> <li>テキスト</li> </ul>

  • 指定位置に要素を追加する

    <script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも?いいのですが、何かいいやり方ありませんか?

  • onclickで表示/非表示させている動きに、別ページからリンクさせるには

    JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01">  ・・・ </div> <div id="test02">  ・・・ </div> <div id="test03">  ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか? 恐れ入りますがよろしくお願い致します。

  • テキストやリンクの表示・非表示

    Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト2</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>

  • クリッカブルマップで切り替えた先の画像に部分リンク

    javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。(下記コード) イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="~~~" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="~~~" />    <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="~~~" /> </map> </figure>

  • 現在、サムネイル一覧を表示させておいて、そのサムネイルをクリックすると

    現在、サムネイル一覧を表示させておいて、そのサムネイルをクリックすると、左側の拡大写真がクリックしたサムネイルのものに切り替わるイメージギャラリーを作成しています。 なぜか、IE6でのみで「エラー:オブジェクトがありません」となります。エラーは「if(description.firstChild.nodeType == 3){ 」の部分で発生しています。 どうも原因が分らずに困っています。 何か分る方がいらっしゃれば、ソースを以下にのせておくので、アドバイスを頂けないでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> function prepareGallery(){ if(!document.getElementsByTagName || !document.getElementById) return false; if(!document.getElementById("imagegallery")) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this); } } } function showPic(whichpic){ if(!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); if(placeholder.nodeName != "IMG") return true; placeholder.setAttribute("src",source); if(!document.getElementById("description")) return false; var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title"):""; var description = document.getElementById("description"); if(description.firstChild.nodeType == 3){ description.firstChild.nodeValue = text; } return false; } function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } addLoadEvent(prepareGallery); </script> </head> <body> <div class="Area03_l"> <img src="sample01.jpg" id="placeholder" alt="サンプル01"><br> <div id="description">サンプル01</div> </div> <table border="0" cellspacing="3" cellpadding="0" class="photo_table" id="imagegallery"> <tr> <td><a href="sample01.jpg" title="サンプル01"><img src="sample01_thum.jpg" alt="サンプル01"></a></td> <td><a href="sample02.jpg" title="サンプル02"><img src="sample02_thum.jpg" alt="サンプル02"></a></td> </tr> </table> </body></html>

専門家に質問してみよう