2022-07-16に投稿

HTML + JavaScript: 見出しやボタンなどの表示文字列を統一させたいとき

JavaScript HTML

とあるシステムに登場する複数のWEB画面のあいだで、見出しやボタンの表示文字列を統一させたい場合に、私が使う手法のひとつがこれです。
いろんな方が、これと同じような手法をとられていると思います。かな？

サンプル

JavaScript側からです。これを各HTMLにインクルードして使います。

// JavaScript
function label_print () {
  var arrVar = {
    label_lastname: "姓",
    label_firstname: "名",
    label_birthday: "生年月日",
  };
  var arrVarButton = {
    button_save: "保存",
    button_cancel: "キャンセル",
  };
  for (let key in arrVar) {
    if(document.getElementById(key) != null) {
      $('#' + key).html(arrVar[key]);
    }
  }
  for (let key in arrVarButton) {
    if(document.getElementById(key) != null) {
      $('#' + key).val(arrVarButton[key]);
    }
  }
}

HTML側です。

<!-- HTML -->
  ...
  <body class="" onload="label_print();">
  ...
    <td class="label" style="white-space: nowrap;">
      <div id="label_lastname"></div>
    </td>
  ...

サーバ・サイドで、データベースなどを用いて処理する手法もあったり、いろんな手法があっていずれも賛否両論だと思います。上記はレガシーで単純、必要なパーツも少なく取り回しが楽ですね。Simple is best.

ツイッターでシェア

みんなに共有、忘れないようにメモ