JavaScriptでボタンを押すと文字列が変更されるページ

ボタンを押すとこちらの文字列が変化します。

ソースコード:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JavaScriptでボタンを押すと文字列が変更されるページ</title>
    <style type="text/css">

/* エレメント指定
p {
  border:1px solid #8f8f8f;
}
*/
/* クラス指定
.example {
  border:1px solid #8f8f8f;
}
  */
/* エレメント.クラス指定
p.example {
  border:1px solid #8f8f8f;
}
 */
/* ID指定 */
#text_area {
  border:1px solid #8f8f8f;
}
    </style>
  </head>
  <body>
    <p id='text_area' class='example'>ボタンを押すとこちらの文字列が変化します。</p>
    <input type="button" value="button" id="btn">

    <script>

// 引数で指定したIDを持つエレメントを返す。
let btn = document.getElementById('btn');
let text_area = document.getElementById('text_area');

// ボタンが押された場合実行するfunctionを登録
btn.addEventListener('click', function(){
    // text_areaの文字列を代入。
    text_area.innerText = 'ボタンが押された。';
});
    </script>
    </body>
</html>

コメント