LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

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をアラートに出す

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








最新の投稿

Pixel 5でSuicaが使えないときはGoogle PayでSuicaを有効にしてみる

Pixel 5への機種変でSuicaが使えない人向けに書きました。 MISSION Pixel 5でSuicaを使えるようにする SOLUTION 旧端末で機種変更の設定を行う NFCをオンにする Google PayでSuicaを有効にする PROBLEMS 以前...