classやidが変わったときに情報を更新する（？）

解決済

質問者：idhokanohi
質問日時：2008/05/02 08:33
回答数：3件

今現在
ボタンを押すと
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はあまり詳しくないです。
質問が下手ですいません。補足が必要でしたら出来る範囲で行います。
よろしくお願いします。タスケテー

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2008/05/02 12:35

初期値の<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()};}

- 0
- 件

通報する

この回答へのお礼

うわぁ・・・本当だ、どうして気づかなかったんだろう；
ありがとうございます、助かりました～

通報する

お礼日時：2008/05/02 13:32

No.2

回答者： steel_gray
回答日時：2008/05/02 12:20

＞次はスイッチ１を押してもIDが変わっているので何も起こらない。

はずなんですが、起こってしまうのです。

起こるのが正常です。

イベントハンドラ(onclick)はその「要素」に括り付けられています。
IDは要素を得る時に利用しただけであって、
IDが変わっても括り付けたイベントハンドラは不変です。

たぶん、
＞document.getElementById("bgred").onclick = (function(){onoff()});
こうする事で ID に対して括りつけたように思ってしまったのかもしれませんが、
これは、font要素にonclick属性を書いた場合と同じです。

（イベントハンドラを付けたり外したりはちょっとややこしいので割愛します）
クリックされたら onoff() は必ず呼ばれるものとしてスクリプトを書いてみてはどうでしょう。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
>イベントハンドラ(onclick)はその「要素」に括り付けられています。
>IDは要素を得る時に利用しただけであって、
>IDが変わっても括り付けたイベントハンドラは不変です。
やっぱりそうでしたか＞＜
ちょっとスッキリしました

通報する

お礼日時：2008/05/02 13:30

No.1

回答者： auty
回答日時：2008/05/02 09:59

・　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">

</style>

<script type="text/javascript">

</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>