LANG SELRCT

コードを書く場所についてはこちら

2018年1月22日月曜日

オブジェクトの値を取得してHTML要素の属性値に入れたい


こういうHTML要素があって
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>


それらの要素を取得して
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");


こういうオブジェクト作って
      var obj = {
        "hare": hare,
        "ame": ame,
        "yuki": yuki
      }


別で作ったこういうオブジェクトの値を
HTML要素のid, value, name, テキストに設定したい
    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }


このように



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>
  <script>
    document.addEventListener('DOMContentLoaded', set_data);

    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }

    function set_data() {
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");

      var obj = {
        "hare": hare,
        "ame": ame,
        "yuki": yuki
      }

      for (var i = 0; i < Object.keys(obj).length; i++) {
        var key = Object.keys(obj)[i];
        obj[key].setAttribute("id", key);
        obj[key].setAttribute("value", data[key][0]);
        obj[key].setAttribute("name", data[key][1]);
        obj[key].textContent = data[key][2];
      }
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


ラベルを置く → id は HARE 
ラベルを置く → id は AME
ラベルを置く → id は YUKI 

HTMLドキュメントが読み込まれたらset_dataを実行する

dataオブジェクトを用意する





この機能がやること
id が hare の要素を取得して
id が ame の要素を取得して
id が yuki の要素を取得して

dateオブジェクトと同じ key にして取得した要素を値に入れる





objのkeyの数だけ以下を繰り返す
objのkeyを一つずつ取得して → i が 0 の場合は hare
それを要素のidに設定し
dataオブジェクトからkeyに一致する値(例では配列)を取得して0番目の値を要素のvalueに設定して
同じようにnameには1番目の値を
テキストには2番目の値を設定する








HTML要素をオブジェクトに入れずに設定する場合

これを別の書き方で実現できないかと思って試したのが上記のindex.htmlです


index.html
<!DOCTYPE html>
<html>
<body>
  <label id="HARE"></label>
  <label id="AME"></label>
  <label id="YUKI"></label>
  <script>
    document.addEventListener('DOMContentLoaded', set_data);

    var data = {
      "hare": ["はれ", "ハレ", "晴れ"],
      "ame": ["あめ", "アメ", "雨"],
      "yuki": ["ゆき", "ユキ", "雪"],
    }

    function set_data() {
      var hare = document.getElementById("HARE");
      var ame = document.getElementById("AME");
      var yuki = document.getElementById("YUKI");

      hare.setAttribute("id", "hare");
      hare.setAttribute("value", data["hare"][0]);
      hare.setAttribute("name", data["hare"][1]);
      hare.textContent = data["hare"][2];
      ame.setAttribute("id", "ame");
      ame.setAttribute("value", data["ame"][0]);
      ame.setAttribute("name", data["ame"][1]);
      ame.textContent = data["ame"][2];
      yuki.setAttribute("id", "yuki");
      yuki.setAttribute("value", data["yuki"][0]);
      yuki.setAttribute("name", data["yuki"][1]);
      yuki.textContent = data["yuki"][2];
    }
  </script>
</body>
</html>