前回はJavaScriptを初めて使ってみましたが、結果の出力があまり良い感じにはなりませんでした。(仕様通りです。)
document.writeという方法で文字列出力をおこなったことが原因です。
document.writeの処理としては、「ドキュメントに書き出す」のようです。
新しいドキュメント(記事ページ)を作成し、文字を書き出してしまいます。
特定のフィールドに文字列を出力したい場合、innerHTMLというものを使うとhtmlタグとidで紐づけてフィールドを指定できるそうです。
下記の通り、html上に記載してみました。文字列出力先は<div>に指定しています。
----------
<p><input id="button" type="button" value="ボタン" /></p>
<script type="text/javascript">
document.getElementById("button").onclick = function() {
document.getElementById("outText").innerHTML = "ボタンを押下しました";
}
</script>
<p>↓ここに文字列が表示されます↓</p>
<div id="outText"> </div>
----------
作成した結果はこちらです。
↓ここに文字列が表示されます↓
ようやく、無難な文字列出力ができました。
今後の文字列出力はinnerHTMLでやっていきましょう。