![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
おねがいします。
今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
No.2ベストアンサー
- 回答日時:
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'
);
}
言いたいことが伝わるといいんだけど。
ちなみに動作確認していないので注意。
おぉ!!
document.getElementById(id).firstChild.saveid = id;
なんてことができるんですか!!!
HTML(DOM?)を直接いじるようでできないのかと思ってました。
こちらで確認したところ
alert(this.firstChild.saveid);
でちゃんと動きました。
HTMLの方をちゃんと見せなくてすいませんでした。
2度も教えて頂いてありがとうございましたm(_ _)m
No.1
- 回答日時:
原因はシンプルよ。
addHandler内で設定している変数「id」だけど、
設定時は確かにforでまわしているように見えるわ
でもね、実行時はforループはすでに終了してしまっているの。
つまり、idはlinksIdの一番最後の値になっているわけ。
結果的にidは常に'twitter'になってしまっているのよ。
なるほど!
でもidってfor文で回す度に新しく生成されるんじゃないんですか・・・?
とりあえずfor文の初めに
var id_copied = new String(id);
としてidをid_copiedの代わりに使いまわしてみましたが変わりません。。。
基本型と参照型の違いがよく分かってないように思います。。。
どうすればいいんでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
追加ボタンを押した際に ok ボ...
-
Q&A掲示板の入力フォームに文字...
-
スマホ上で、左右スワイプで次...
-
フロントエンドフレームワーク...
-
セレクトボックスで配列を呼び...
-
jQueryでのレスポンシブが綺麗...
-
メールフォームの日付入力フォ...
-
変数名をどのようにつけるのが...
-
出発駅A、到着駅Bを選択すると...
-
IndexedDB を使ってファイルア...
-
読み込んだQRコードをフォーム...
-
最小二乗法
-
二次元配列の中の各行の要素を...
-
「?」の意味
-
HTMLでサブフレームから親のス...
-
二次元配列の全要素の全要素を...
-
jsで質問です。 ボタンが二つ存...
-
階層別の組織図の自動作成について
-
正規表現について質問です。条...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLでサブフレームから親のス...
-
読み込んだQRコードをフォーム...
-
初心者です。gulpでコンパイル...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
GASに文字列として関数を入れる...
-
二次元配列を使って順位をだす...
-
特定の文字列を複数抜き出した...
-
jQueryで同じクラス名のものを...
-
セレクトを全て選択されていな...
-
スマホ上で、左右スワイプで次...
-
React hooksが値を返して配列変...
-
GASでGoogleフォームの自動返信...
-
jsで質問です。 ボタンが二つ存...
-
ジャバスクリプトについて。
-
出発駅A、到着駅Bを選択すると...
-
階層別の組織図の自動作成について
-
セレクトボックスで配列を呼び...
-
フォームが空欄の時にフォーム...
-
【Google Apps Script】「ライ...
おすすめ情報