LANG SELRCT

コードを書く場所

2018年8月4日土曜日

HTML要素を動的に作りたい(チェックボックス)


こういうチェックボックスをJavaScriptで作りたい



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




index.html
<!DOCTYPE html>
<html>
  <body>
    <form id="checkbox_form"></form>
    <script>
      var values = ["aaa", "bbb", "ccc"];
      create_checkbox(values);
      
      function create_checkbox(values) {
        var parent = document.getElementById("checkbox_form"); 
        for (var i = 0; i < values.length; i++) {
          var checkbox = document.createElement('input');
          var label = document.createElement('label');
          var br = document.createElement('br');
          var id = "check" + i;
          var name = "check1";
          var value = values[i];
          checkbox.setAttribute("type", "checkbox");
          checkbox.setAttribute("id", id);
          checkbox.setAttribute("name", name);
          checkbox.setAttribute("value", value);
          label.setAttribute("for", id);
          label.textContent = value;
      
          checkbox.onclick = function() {
            alert(this.value);
          }
          parent.appendChild(br);
          parent.appendChild(checkbox);
          parent.appendChild(label);
        }
      }
    </script>
  </body>
</html>

意訳
 


フォームを用意する

チェックボックスの選択肢
create_checkboxでチェックボックスを作る

この機能がやること(valuesを受け取る)
親要素を取得して
valuesの数だけ以下を繰り返す
チェックボックスを作って
ラベルを作って
改行を作って
チェックボックスのidを決めて
チェックボックスのnameを決めて(チェックボックスのグループ名)
チェックボックスのvalueを決めて
チェックボックスのtypeを設定して
チェックボックスのidを設定して
チェックボックスのnameを設定して
チェックボックスのvalueを設定して
ラベルのforにチェックボックスのidを設定して
ラベルのtextContentにvalueを設定して表示する

チェックボックスがクリックされた時に
そのvalueをアラートに出す

親要素に改行を追加して
親要素にチェックボックスを追加して
親要素にラベルを追加する








最新の投稿

デフォルトのGCPプロジェクトを標準のGCPプロジェクトに切り替えたい

Google Apps ScriptではデフォルトのGCPプロジェクトを標準のGCPプロジェクトに切り替えることができる。 順を追ってやってみたので、ステップ化して書き残しておきます。 STEP1 標準のGCPプロジェクトについて確認する まずは、Standard Cloud ...