LANG SELRCT

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

2017年12月22日金曜日

HTML要素を動的に作りたい(テキストボックス)

JavaScriptでテキストボックスを動的に作る



このようにテキストボックスを3つ作成するコードの例です


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




index.html
<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  create_textbox();
  function create_textbox() {
    var main = document.getElementById('main_div');
    for (var i = 0; i < 3; i++) {
      var elem = document.createElement('input');
      var id = "tb" + i;
      elem.setAttribute("type", "text");
      elem.setAttribute("placeholder", "tb" + i);
      elem.setAttribute("id", id);
      main_div.appendChild(elem);
    }
  }
</script>
</html>
意訳
これはHTML5文書です


divを置く(idはmain_div)



create_tb()を実行する
この機能がやること
idがmain_divの要素を取得して
以下を3回繰り返す
input要素を作成して
idを決めて
typeをtextにして
placeholderを設定して→入力欄に表示しておく文字
idを設定して
main_divにボタンを追加する






index.htmlにある

 for (var i = 0; i < 3; i++) {

の 3 を別の数値変えると作成されるテキストボックスの数が変わります


関連記事

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



参考

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