- ベストアンサー
テキストエリアの文字を切り替える
意味が通じにくいかもしれませんが、１つのボタンを押すことでフォーム内テキストエリアの中身をどんどん切り替えていくって言うのはどうすればいいでしょうか？ ┌―――――― ｜[内容] ｜ └―――――― 【ボタン】 例えばまず最初にボタンを押したら[内容]が[文章A]に、またボタンを押したら[文章B]、さらにボタンを押したら・・・といった具合に１回ボタンを押すごとにテキストエリアの中身をどんどん切り替えて行きたいのですが・・・。 私の力では検索などを使用してもやり方を見つけることが出来ません。どうかよろしくお願い致します。
- MAN_MA_RUI
- お礼率82% (34/41)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ANo2のスクリプトはtextareaに、隠してあるpの内容(display:none）を映してしるだけなのですが、textareaは#PCDATAしか出現できないため<BR>などのタグがpの中に含まれるとエラーがでるのではないかと思います。 そこでタグも映すときには、いろいろなタグが出現できるdiv（(%flow)*)などを使った方が無難だと思います。 （あくまでも訪問者に対してテキストエリアに入力を促さない場合です。） そこで解決策として下のようにすると良いかもしれません。 -----------追加----------------------------- これはdivをテキストエリア風にするスタイルです。 <style type="text/css"> #area{width:200px;height:100px;overflow:scroll;border:inset 2px;} </style> -----------変更----------------------------- テキストエリアをdivに変更します。 document.write('<textarea id="area">文章A</textarea>') ↓ document.write('<div id="area">文章A</div>') ----------------------------------------------------- このようにするとpの中にタグが含まれていてもエラーがでることはないと思います。
その他の回答 (2)
ANo.1の回答をこのように改造すると順番に表示されます。 --------------------------------------------------- <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>**</title> </head> <body> <div id="data"> <p>文章A</p> <p>文章B</p> <p>文章C</p> <span style="display:none">0</span> </div> <script type="text/javascript"> <!-- document.write('<textarea id="area">文章A</textarea>') document.write('<button onclick="a()">Next>></button>') var DATA = document.getElementById('data') DATA.style.display="none" function a(){ var Count = DATA.getElementsByTagName('span') var TEXT = DATA.getElementsByTagName('p') var AREA = document.getElementById('area') TextNo = eval(Count[0].innerHTML)+1 if(TextNo == TEXT.length){TextNo = 0} Count[0].innerHTML = TextNo AREA.innerHTML = TEXT[TextNo].innerHTML } //--> </script> </body> </html>
お礼
スクリプトはちゃんと望みどおりに動作しました。 dshguskdigさん、ご教授くださいましてありがとうございます。 ・・・ちなみに、このスクリプトでボタンを押したときに表示される文章を改行することはできるのでしょうか？ 一応自分でもいじってはみたのですが、よくわかりません。 別に改行されなければ困るというわけでもありませんが、もし宜しければ・・・。
- talepanda
- ベストアンサー率58% (45/77)
<textarea id="orz"></textarea> <button onclick="document.getElementById('orz').innerHTML+='orz ';">@</button> を応用してください
お礼
ご回答ありがとうございます。 ご提示いただいたソースは参考にはなりそうですが、残念ながら当方の意図するものとは違います。 説明が悪かったのかもしれません。私はボタンを押すごとにそれまであった内容を消して、別の内容を表示させて行きたいのです。 何か心当たりなどはないでしょうか・・・？
お礼
これはいろいろ応用が利きそうですね。目的にかなっているし、大変勉強にもなります。 ご回答くださいましてどうもありがとうございました。