アーシの毎日インプット

毎日1つ以上学習する。学習した内容を公開する。を目標に自分のスキルアップを目指します。

innerHTML:ブログでプログラミング2

スポンサードリンク

前回はJavaScriptを初めて使ってみましたが、結果の出力があまり良い感じにはなりませんでした。(仕様通りです。)

arsinput.hatenablog.jp

 

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でやっていきましょう。

 

【アーシの原点】

【頭を鍛える迷路集】


スポンサードリンク