LANG SELRCT

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

2017年12月22日金曜日

HTML要素を動的に作りたい(ボタン)

JavaScriptでボタンを動的に作る



このようボタンを3つ並べるコードの例です
それぞれのボタンをクリックするとvalueがアラートに出る


コード.gs
function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}
意訳
この処理は以下を実行する
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  var values = ["aaa", "bbb", "ccc"];
  create_button(values);

  function create_button(values) {
    var main_div = document.getElementById('main_div');
    for (var i = 0; i < values.length; i++) {
      var elem = document.createElement('button');
      var id = "bt" + i;
      var value = values[i];
      elem.innerHTML = value;
      elem.setAttribute("value", value);
      elem.setAttribute("type", "button");
      elem.setAttribute("id", id);
      elem.onclick = function() {
        alert(this.value);
      }
      main_div.appendChild(elem);
    }
  }
</script>
</html>
意訳
これはHTML5文書です


divを置く(idはmain_div)



ボタンに表示するテキストを用意しておく
create_button(values)を実行する

この処理は以下を実行する
idがmain_divの要素を取得して
valuesの数だけ以下を繰り返す
button要素を作成して
idを決めて
valuesからvalueを取得して
innerHTMLに表示して
valueにも設定して
typeをbuttonにして
idを設定して
ボタンがクリックされたら以下を実行する
クリックされたボタンのvalueをアラートに出す

main_divにボタンを追加する






index.htmlにある

var values = ["aaa", "bbb", "ccc"];

の配列の要素数を変えると作成されるボタンの数が変わります

var values = ["aaa", "bbb", "ccc", "ddd"];

にすると4つ目にdddのボタンが作成される


関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形



参考

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/