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

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








最新の投稿

選択したテキストを配列に入れてテキストエリアに出力したい

今回やりたいこと アプリケーションの中で 選択したテキストを取得する。 選択したテキストを テキストエリアに入れる。 選択したテキストを 配列に追加していく。 STEP1 「テキストを」を選択するとテキストエリアに「テキストを」が入る。 STEP2 その後、「追加して」を選択する...