Javascript：クリックすると表示する文字を変更する。

Javascriptメモ：文字の変更

クリックすると文字を変更するプログラム：

　下記「文字1」をクリックすると、「変更しました」

「変更しました」をクリックすると、「文字1」

を表示する。

Target1

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>タイトル</title>
 
<p>クリックすると文字を変更するプログラム：</p>
<div>
<div>　下記「文字1」をクリックすると、「変更しました」</div>
<div> 「変更しました」をクリックすると、「文字1」</div>
<div>を表示する。</div>
<div> </div>
</div>
<div id="target1">Target1</div>
<div> </div>
<div> </div>
<!-- Javascriptの設定 -->
<p>
<script type="text/javascript">
    "use strict";
    let t1_1 = "文字1";          //最初に表示する文字を格納
    let t1_2 = "変更しました";   //クリックしたら表示する文字を格納
    let flag = false;            //文字切り替えフラグ、初期化

    let Text1 = document.getElementById("target1"); //IDを格納

    //最初に表示する文字の設定
    Text1.innerText = t1_1;  //文字1を表示
    
    Text1.addEventListener("click", function () {  //クリックしたら動作
      if (flag == false) {                         //文字切り替えフラグが0の時
        Text1.innerText = t1_2;                    //「変更しました」を表示
        flag = true;                               //フラグを1に変更
      } else {                                     //フラグがtrue以外の時
        Text1.innerText = t1_1;                    //「文字1」を表示
        flag = false;                              //フラグを0に変更
      }
    });
  </script>
</p>
</p>