押すとテキストが出てくるボタンを押すとページごと真っ新になって結果が表示されます

Question

http://owata.webcrow.jp/testJs.html
上記のサイトを参考にして頂きたいのですが、ボタンを押すと新しいページに飛ぶ?ような感じでリセットされた上にテキストが表示されます。
ページに何も変化が無いままテキストが表示されるようにしたいのですが、どうしたらいいですか?恐らく初歩中の初歩だと思うんですが回答お願いします。

Answer 1

サイトへのリンクだけではなく、実際のソースコードを質問に追記した方が、回答する方々も見やすくて良いですね。

さて、Javascriptで利用しているdocument.writeですが、下記ページの説明を読む限り、古い内容は削除されるようですね。（現在の動作通りですね）

document.write

解決策ですが、HTMLの要素であるDOMをJavascirptで操作することで、希望の位置にタグや要素を追加することが出来ます。手順としては以下のようになるかと思います。

1. 追加したい要素の作成 - document.createElement
2. 追加したい要素の取得 - document.getElementById
3. 2で取得した要素に、1で作成した要素を追加 - Node.appendChild

「2」の手順は、追加したい要素に「id属性」があることが前提となりますので、ご注意ください。

上記の他、jQueryなど外部ライブラリ（フレームワーク）を利用したサンプルもWeb上に大量に情報がありますが、まずはシンプルなやり方で理解を深めるのがよいかと思います。

Comments

[Kei0]

返信が遅れてすみません。解決しました！document.writeはなんだか使わない方がいいみたいですね。document.getElementById("ボタンのid名").textContent = "表示させたい文字"; でボタンごと表示させたい文字に書き換えてしまえばいいんですね。

[takyafumin]

解決して何よりです！回答のした方に記載しましたが、「jQuery」などの外部ライブラリを利用するとシンプルなコーディングで記載することも可能です。時間があれば、チャレンジしてみてください！