このようボタンを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/
