JavaScript DOM操作 #JavaScript

今回はJavaScriptでHTMLのテキストを表示するという機能を実装してみました。
実装した内容は以下になります。
・クラスの作成
・DOM操作の実装

HTMLはこのようにしました

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...省略
  </head>
  <body>
    <div>
      <div id="parameterView"></div>
    </div>
    <div>
      <div id="enemyImageView" style="position: relative"></div>
    </div>
    <div>
      <div id="commandView"></div>
      <div id="messageView"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

まずはクラスの作成から実装します

script.js

class Message{
}

クラス名はとりあえず適当につけました

次にHTMLのテキストを表示の実装をしていきます
先ほど作成したクラスの中に実装していきましょう!

script.js

class Message{
  static printMessage(text) {
    messageView.innerHTML = text;
  }
}

静的メソッドを使うために関数の前にstaticをつけておきました。
コードを中身を見ていきましょう!
「messageView.innerHTML=text;」の部分ですが、ここにはHTMLで指定したタグのidにtextという引数の値を格納するという処理になります

最後に実装した処理を実行していきましょう!

script.js

Message.printMessage("こんにちは<br>");

クラス内の関数を実行するために上記のように実装していきます
ブラウザで開くと引数に代入した値が表示されるようになっているはずです。

最後まで見ていただきありがとうございました。これからもプログラミング関連の投稿をしていきますのでぜひよろしくお願いします。