あるタグについて質問します

質問

タグについて質問します。。

ブログを書いているのでが　あるサイトで見つけたもので
タグをコピーして使えるものなのですが
オンクリックと言ってクリックしたら文字や画像が
出るものです。。。

↓このタグです

<span onClick="document.all.item('moji1').style.visibility='visible'">
クリックする文字
</span>

<div ID="moji1" style="visibility:hidden;">
表示される文字
</div>

私はタグは素人なので解らないのですが
このタグをブログの記事に書いてみて
このタグを１つ使って書いた場合、
きちんとクリックしたら反応して文字が出てくるのですが
同じ記事内にこのタグを２つ使うとクリックしても
文字がでてこなくなって反応しません。。。
また同じ記事内では反応しないのかと思って
１つの記事に１つずつ使おうと今度は
記事を二つに分けて使おうとしたら
さっきまでクリックしたら反応していた一つ目の記事まで
クリックに反応しなくなります。
そして２つ目の記事を削除したら
また元のように１つ目の記事がクリックに反応してくれます。

もしかして、このタグになにかプラスする事によって
きちんとクリックしても使えるようにならないでしょうか？
同じ記事内でも、あるいは１つの記事に１つずつでもいいので
あれば教えてもらえたら嬉しいです。。。

また、このタグでは１つ以上は無理なのでしたら
記事内に１つずつでもよいので他によいタグがあれば
教えていただけたら嬉しいです。。。

よろしくお願い致します

回答No.1

koke29 · ベストアンサー

ID="moji1"が重複するのが動作しなくなる原因だと思うので
二つ目以降は

<span onClick="document.all.item('moji2').style.visibility='visible'">
クリックする文字</span>
<div ID="moji2" style="visibility:hidden;">
表示される文字</div>

という感じ（moji○の数字を変える）にしてあげれば
何個書いても大丈夫だと思いますよ

回答No.7

neko-ten

たぶん、素人さんということで動作している内容を理解されてないのかな？
この記述自体はHTMLとJavaScriptになります。

spanでインラインを指定し、その範囲をクリックすることでJavaScriptを動作させています。
onClick="～"は、「クリックされた場合に～を実行する」という意味合いです。
そして、その～に書かれている内容ですが
document.all.item('moji1').style.visibility='visible'
となっています。
これは
「ドキュメント（いわゆるページ内）のすべての要素から'moji1'を探して、その要素のスタイルである"visibility"を"visible"にする」
という意味です。

今回のタグ（というかコード）を二つ書いた場合、idが「moju1」となっている要素が同じページに複数出てきてしまいます。
同じIDの要素を複数指定することはできないので、今回は動作していないのです。
また、今回はBlogということで記事とおっしゃっていますが、記事というのはブログのシステム上の切り分けの単位であるので関係ないです。
あくまでも1ページに・・・ということになります。

簡単な改善方法としては、IDをそれぞれ別にすることです。

<span onClick="document.all.item('moji1').style.visibility='visible'">
文字1
</span>

<div ID="moji1" style="visibility:hidden;">
文字1をクリックしたときに表示する文字
</div>
<span onClick="document.all.item('moji2').style.visibility='visible'">
文字2
</span>

<div ID="moji2" style="visibility:hidden;">
文字2をクリックしたときに表示する文字
</div>

-------------------------------------------------

基本的に他の回答者様の内容とかぶってしまっていますが・・・。（汗）
ただ、Blogというシステムがある上でJavaScriptを利用することはあまりお勧めできません。
場合によってはBlogの表示がkを荒れてしまうこともありますから・・・。

回答No.6

SAYKA

No5→
classNameだとズバリで持って来れないからやっぱりIDになるんじゃないかな。

1つのクリックで複数同時にやりたかったらstyle操作を2つonClick内に書く事になるね。

回答No.5

koke29

>#4様
classではスクリプト自体動かないですよー
（classでも出来るのかーと思って試したら、ダメでしたー）

回答No.4

noname#100277

何だかなあ。
idは１ページに付き（正確には一つの指定された内容に対して、ソレを参照出来るidと云う事での）１つしか対応しません。
二つ以上使いたい場合は「class」で指定。
<要素 id="内容">・・・</要素>
を
<要素 class="内容">・・・</要素>
とする。

回答No.3

SAYKA

>document.all
これがIEのみの表記　　というのはNo1が指摘してるから良いとして・・・

>document.all.item('moji1')
><div ID="moji1" style="visibility:hidden;">

これの「moji1」というのが対応っていうのは判る？
判るようならまずidについて調べてね。
それと、数値で始まるIDは　だめだから注意してね。(使える文字種にも注意)

回答No.2

koke29

補足です
このスクリプトはFirefoxでは動かないみたいです
（IEは動作確認出来ました）