- ベストアンサー
classやidが変わったときに情報を更新する（？）
今現在 ボタンを押すと class やidが変化するようにしているのですが、 変化後、classやidで指定したcssの色にはなるのですが、（同時に元のclassやidのcssの色は無効になる） getElementByIdや getElementsByClassName("sw")[1]はページを読み込んだときの初期状態のidやclassに対してかかるようで、 読み込み終了後のid、classの変化後にも対応するにはどのようにするのでしょうか？ 以下のがページ読み込み後idやclassが変わっても、読み込んだ時に設定されているid、classで実行されてしまう物です。 function lod(){ document.getElementsByClassName("sw")[1].onclick = (function(){iFrame()}); document.getElementById("td").onclick = (function(){iFrame()}); }; まだJavascriptはあまり詳しくないです。 質問が下手ですいません。補足が必要でしたら出来る範囲で行います。 よろしくお願いします。タスケテー
- idhokanohi
- お礼率58% (48/82)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
初期値の<a id="tex" class="show">テキスト1</a>は <a id="tex" class="hide">テキスト1</a>ですよね？ フラグで管理しているならbgredのonlickに分岐をつけておくだけでよいでしょう。 document.getElementById("bgred").onclick = function(){if(flag==0){onoff()};}
その他の回答 (2)
- steel_gray
- ベストアンサー率66% (1052/1578)
＞次はスイッチ１を押してもIDが変わっているので何も起こらない。はずなんですが、起こってしまうのです。 起こるのが正常です。 イベントハンドラ(onclick)はその「要素」に括り付けられています。 IDは要素を得る時に利用しただけであって、 IDが変わっても括り付けたイベントハンドラは不変です。 たぶん、 ＞document.getElementById("bgred").onclick = (function(){onoff()}); こうする事で ID に対して括りつけたように思ってしまったのかもしれませんが、 これは、font要素にonclick属性を書いた場合と同じです。 （イベントハンドラを付けたり外したりはちょっとややこしいので割愛します） クリックされたら onoff() は必ず呼ばれるものとしてスクリプトを書いてみてはどうでしょう。
お礼
回答ありがとうございます。 >イベントハンドラ(onclick)はその「要素」に括り付けられています。 >IDは要素を得る時に利用しただけであって、 >IDが変わっても括り付けたイベントハンドラは不変です。 やっぱりそうでしたか＞＜ ちょっとスッキリしました
- auty
- ベストアンサー率58% (284/486)
・ getElementByIdで確かめたところ、変更後のものが有効になるようです。 ・ 蛇足かも知れませんが、 1. idは、ユニークでなければならない。 2. プロパティclassNameには、空白で区切られた複数のCSSクラス名があるというのはご存知でしょうか。
補足
＞プロパティclassName・・・ classの複数指定については知ってますよ～ ＞getElementByIdで確かめたところ、変更後のものが有効になるようです。 確認済みですが、変更前の物もなぜか有効なのです。 ちょっと作ってみました。 window.onloadあたりが怪しいのかもしれません。 指定IDをクリックでイベントを実行する方法は他にありませんか？ できるだけシンプルに。 <font id="bgred" onclick="onoff()">スイッチ1<a id=" のようにすると、当たり前ですが、ずっとスイッチが有効になってしまうので、このような方法をとっているのですが上手くいきません。 <html> <head> <title></title> <style type="text/css"> <!-- #bgred {background-color:red;color:white;} #bgblue {background-color:blue;} #bggreen {background-color:green;} .hide { display:none;} .show { display:inline; } --> </style> <script type="text/javascript"> <!-- var flag=0; function onoff() { if (flag == 0) { document.getElementById("tex").className = "hide"; document.getElementById("bggreen").className="show"; document.getElementById("bgred").id="bgblue"; flag = 1; } else { document.getElementById("bggreen").className = "hide"; document.getElementById("bgblue").id="bgred"; document.getElementById("tex").className="show"; flag = 0; } } window.onload = function sw(){ document.getElementById("bgred").onclick = (function(){onoff()}); document.getElementById("bggreen").onclick = (function(){onoff()}); }; function test1(){document.getElementById("tex").className = "hide";} //--> </script> <body> <font id="bgred">スイッチ1<a id="tex" class="show">テキスト1</a></font><br> <b id="bggreen" class="hide">スイッチ2</b><br> <input type="button" onclick="onoff()" value="TEST用"> </body> </html> <!-- スイッチ１を押すとスイッチ１のIDがかわり背景が青に。テキスト1が消える。スイッチ2が出る。 次はスイッチ１を押してもIDが変わっているので何も起こらない。はずなんですが、起こってしまうのです。IDは変わってるのに。 スイッチ2を押すとスイッチ1のIDが元に戻り、テキスト1が出現。スイッチ2が消える。 以降繰り返し利用可能 -->
お礼
うわぁ・・・本当だ、どうして気づかなかったんだろう； ありがとうございます、助かりました～