• ベストアンサー

文字を交互に変化させたいのですが…

文字変化タグについて質問があります。 クリックすると文字が変わる、というタグは分かるのですが (<span onClick="this.innerText='文字2'">文字1</span>) クリックして文字2に変わった後、もう一度クリックすると文字1に戻るというのは不可能でしょうか? 1、2、1、2とエンドレスで変わるようにしたいのですが… 分かる方いらっしゃったら教えていただけると嬉しいです。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

innerTextはIEしか反応しないのでinnerHTMLでどうでしょう? また、関数化したほうがすっきりするかもれない。 <span onClick="this.innerHTML=this.innerHTML=='文字1'?'文字2':'文字1';">文字1</span>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

回答No.3

#1です 押せるけど、赤にはなってませんでした。 多分回答時に間違えたんですね

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

明確な理由がない限りこういった無駄なギミックはあまりお勧めしない。 また、HTML と CSS と ecmascript/javascriptは使われる用語も,全然別物なので,何でもかんでもタグだと思わないこと。 これらの違いがわかる頃にはコードの意味がわかり、応用できるようになっているはず。俺からは応用は示さない。 まず、以下のコードをQ3122625-1.jsというファイル名で保存する //================================== var mode; var message; var E; function init(){ E = document.getElementById("signal"); message = new Array(); message[0] = "START"; message[1] = "STOP"; mode = 0 ShowMessage(); } function ShowMessage(){ //Firefox/Operaの場合は //E.textContent = message[mode]; E.innerText = message[mode]; } function flip(){ mode = (mode + 1) % message.length; ShowMessage(); } //================================ 次に,以下のコードをQ3122625-1.htmlとして保存した後開き、赤い部分をクリックする。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テスト</title> <script type="text/javascript" src="Q3122625-1.js"></script> </head> <body onload="init();"> <p id="signal" onclick="flip();">押せません</p> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 文字列にオンマウスで違う文字列を表示させたいです。

    こんばんは。 下記スクリプトを記述して、文字列の上にマウスが乗ると 違う文字列が出るところまでは出来たのです。 <span onmouseover="this.innerText='メニュー'" onmouseout="this.innerText='MENU'" onclick="this.innerText='メニュー'">MENU</span> 上記の場合、最初は”MENU” という文字が出ていて、オンマウスで カタカナ表記になるように変ります。 IEと、Slepinir では問題なく表示&変更が出来たのですが ファイヤーフォックスでだけ、文字が変らないのです。 どうやら、ファイヤーフォックスでは未対応のスクリプトの ようなのですが、これは、どうしようも無い事なのでしょうか…? どなたか、上記3つのブラウザで対応可能な方法を ご存知ないでしょうか。 よろしくお願いもうしあげます。

  • onmouseoverで文字サイズ変更は可能ですか?

     タグからサイトを作ってる者です。って言ってもHTMLとJava Scriptの違いすら知らない超初心者なので、このカテゴリであってるのかすら分からないですが…。  文字上にマウスを載せると文字が変化するタグを使おうと思っているのですが、載せているときとその前とで文字のサイズを変えることは可能ですか?一応書いてみたのは、 <font size="3" onmouseover="this.innerText='あ'; return true;" onmouseout="this.innerText='い'; return true;"> い </font> ここまでなんですが…こうすると「い」も「あ」も同じサイズですよね。「い」を大きめにして、「あ」は小さくしたいんです。  分かる方いらっしゃいましたら回答お願いします。解説はできるだけ詳しくしてくださると助かります…。

  • Aタグを文字ではなくタグとして認識させたい…

    http://okweb.jp/kotaeru.php3?q=1422320でリンクをクリックすると押せなくなる処理を作りました。 しかし新たな問題が… 以下はソースです。 function linkcontrol(linkno) {  switch(linkno){   case 1:    slink1.innerText ='LINK1';    slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>';    slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>';    break;   case 2:    slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>';    slink2.innerText ='LINK2';    slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>';    break;   case 3:    slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>';    slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>';    slink3.innerText ='LINK3';    break;  } } //BODY部 <span id="slink1"><a href="javascript:linkcontrol(1)">LINK1</a></span> <span id="slink2"><a href="javascript:linkcontrol(2)">LINK2</a></span> <span id="slink3"><a href="javascript:linkcontrol(3)">LINK3</a></span> 上記の処理だと、リンクはクリックできなくなったのですが、他のリンクがリンクにならず文字で<a href~と書かれてしまいます。 これをきちんと文字ではなくタグとして認識させるには、どのような修正をすれば良いのでしょうか。 アドバイスお願いします。 ※そもそもこのソースはあまりよろしくない書き方のような気もします。 ※もしもっと簡単に行える書き方がありましたらそちらも併せてアドバイスをお願いします。

  • ブログでonClickを2つ以上並べると動かない

    ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。

  • onclickで文字をクリックしたら下の方に文字を出す

     ラジオボタンならありましたが、ボタンをクリックしたときではなく普通の文字をクリックしたときに文字を出したいのですが出来ますか。 <input type="button" value="クリック1" onClick="document.all.div1.innerText='クリック1がクリック'"> <div id=div1></div> がラジオボタンで文字を表示する方法で <A onclick="javascript:location.href='index.html';">トップ</A>  トップをクリックしたらindexに移動する方法なのでこれを組み合わせれば出来ると思いますがなにせJavaScriptは初心者なものでよく分かりません。  それと文字を押したら「どこどこ」に出すと「どこどこ」の制御、例えばmarginで指定など出来ましたら教えてください。 長くて判りにくいですがどうぞよろしくお願いします。

  • jQuery タグで囲まれたテキストを取り出す方法

    たとえば this.innerHTML の中身が "<span>xxx</span>yyy" の場合、 xxxだけを取り出す場合はどうすればいいですか? たとえば、 this.find("span").innerText jQuery("span", this).get(0).innerText とかかなり色々なコードを試したんですが無理でした。。 詳しい方、教えてください。。 全体のコード obj.parents().map(function(){return this.innerHTML;}).get().join(" "));

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

    タグについて質問します。。 ブログを書いているのでが あるサイトで見つけたもので タグをコピーして使えるものなのですが オンクリックと言ってクリックしたら文字や画像が 出るものです。。。 ↓このタグです <span onClick="document.all.item('moji1').style.visibility='visible'"> クリックする文字 </span> <div ID="moji1" style="visibility:hidden;"> 表示される文字 </div> 私はタグは素人なので解らないのですが このタグをブログの記事に書いてみて このタグを1つ使って書いた場合、 きちんとクリックしたら反応して文字が出てくるのですが 同じ記事内にこのタグを2つ使うとクリックしても 文字がでてこなくなって反応しません。。。 また同じ記事内では反応しないのかと思って 1つの記事に1つずつ使おうと今度は 記事を二つに分けて使おうとしたら さっきまでクリックしたら反応していた一つ目の記事まで クリックに反応しなくなります。 そして2つ目の記事を削除したら また元のように1つ目の記事がクリックに反応してくれます。 もしかして、このタグになにかプラスする事によって きちんとクリックしても使えるようにならないでしょうか? 同じ記事内でも、あるいは1つの記事に1つずつでもいいので あれば教えてもらえたら嬉しいです。。。 また、このタグでは1つ以上は無理なのでしたら 記事内に1つずつでもよいので他によいタグがあれば 教えていただけたら嬉しいです。。。 よろしくお願い致します

    • ベストアンサー
    • HTML
  • 横に並べて表示したい。

    <span onclick="expand(chip1);" style="cursor:hand;">ここは文字 </span> 上記のタグを、横にふたつ並べて表示したいのですが可能でしょうか。 これは下に(オンクリックで表示される)文字が続くため、<br>タグを入れなければいいというものでもないですし・・・。

  • 文字列をクリックすると文字の代わりに画像を表示する方法

    いつもお世話になります。 小さな画像をクリックして、その小さな画像の代わりに大きな画像を表示する。と、いうことは、 <img src="aaa.jpg" alt="**" onclick="ChngPhotoSize(this,'bbb.jpg')"> ということでできました。ChngPhotoSize()により、aaa.jpgが表示されていた<img>タグ(this)のsrcにbbb.jpgを採用することで表示できます。 ここで、質問ですが、aaa.jpgの代わりに文字列を表示しておきその文字列をクリックすると、文字列の代わりにbbb.jpgのような画像を表示することはできないでしょうか。 別ウィンドーを開いてと、いうのでなく文字列が表示されていたその代わりに表示したいのですが。 よろしくお願いいたします。

  • javascriptで、文字をクリックすると、

    最近htmlをいじり始めた初心者です。 javascriptで、文字をクリックすると、innerTextで変わるようにしたのですが、その変えた文字に、リンクをはるにはどうしたらよいのですか? くだらない質問だと思いますが、ご回答お願いします。