Google Apps Script, как добавить прослушиватели событий для каждого флажка в группе флажков, которые имеют одинаковое имя - PullRequest
Новая
       11

Google Apps Script, как добавить прослушиватели событий для каждого флажка в группе флажков, которые имеют одинаковое имя

0 голосов
/ 08 июля 2019

У меня есть несколько флажков, которые создаются динамически из функции обратного вызова на стороне сервера в скрипте приложений Google. Флажки созданы все с тем же названием «вкусы». Я не могу понять, как добавитьEventListener для каждого флажка и заставить его функционировать, когда состояние флажка изменяется. Если флажок установлен, я хотел бы отобразить некоторые элементы, если это не так, я просто скрою div для элементов отображения.

Как я могу динамически добавлять списки событий так же, как я динамически добавляю флажки?

Я пробовал checkbox.addEventListener в функции, которая создает флажки динамически, до и после добавления флажка (см. Предоставленный код). Я также попытался создать функцию addEventListeners (), которая просто захватывает все элементы по имени, используя .getElementsByName (Name), затем перебирает все флажки и добавляет прослушиватель событий. Также безуспешно пытался изменить его с «изменить» на «щелкнуть».

Я всегда хочу, чтобы функция displayFlavBlocks (chkboxID) запускалась каждый раз, когда любой из флажков установлен или снят (при каждом изменении состояния флажка).

html (сильно отредактировано): 

<script>
google.script.run.withSuccessHandler(

          function (flavors) 
           {                         
             var div = document.getElementById("flavorOptions");

             for (var i=0; i<flavors.length; i++) 
             {
              var checkbox = document.createElement("input");                          
              var chkboxValue = flavors[i];
              var chkboxId = "f" + (i+1);

                 checkbox.type = "checkbox";
                 checkbox.name = "flavors";
                 checkbox.value = chkboxValue;
                 checkbox.id = chkboxId;                             

                 div.appendChild(checkbox);

  // set each flavor checkbox to be checked by default
                 document.getElementById(chkboxId).checked = true;
             }
            addEventListeners();             
           }
        ).getBatchFlavs();
      };

function addEventListeners() {

var checkboxes = document.getElementsByName("flavors");

   for (var i=0;i<checkboxes.length;i++)
    { 
     var chkboxId = checkboxes[i].id;

 checkboxes[i].addEventListener("change", displayFlavBlocks(chkboxId));
    }
}

функция displayFlavBlocks (chkboxId) {

var checked = document.getElementById (chkboxId) .checked; 

if (checked)
{    
  if (chkboxId == "f1")
   {
    document.getElementById("f1block").style.display = "block";
    // do some other stuff         
   }
}

} 

</script>

Флажок и метка отлично отображаются в диалоговом окне и отмечены по умолчанию. Но нажатие и снятие флажка ничего не делает. Я проверил, печатая на консоль, и вижу, что он печатает, что состояние флажка истинно, когда диалог сначала загружается, затем, когда я снимаю флажок, на консоль ничего не печатается и ничего не происходит (я тестировал печать пары вещи, использующие innerHTML, и ничего не печатается при проверке или снятии галочки).

1 Ответ

0 голосов
/ 08 июля 2019

Хотя я не уверен относительно всего вашего сценария, я думаю, что в вашем сценарии displayFlavBlocks(chkboxId) из checkboxes[i].addEventListener("change", displayFlavBlocks(chkboxId)); запускает функцию displayFlavBlocks(chkboxId).Так как насчет изменения следующим образом?

С: 

checkboxes[i].addEventListener("change", displayFlavBlocks(chkboxId));

Кому: 

checkboxes[i].addEventListener("change", displayFlavBlocks);

Примечание:

  • ЕслиВы хотите получить проверенный идентификатор и значение, как насчет использования этого примера сценария?Об этом, пожалуйста, измените это для вашей ситуации. 

    function displayFlavBlocks(chkbox) {
  console.log(chkbox.target.id)
  console.log(chkbox.target.checked)
}

Ссылка:

Редактировать:

  • Флажки добавляются при запуске google.script.run.
  • вы хотите получить идентификатор флажка при его изменении.

Я мог понять, как выше, из вашего вопроса и ответить на комментарии.И когда ваш дополнительный скрипт модифицируется, он становится следующим.Измените функции addEventListeners() и displayFlavBlocks() следующим образом.

Модифицированный скрипт:

Следующим изменением при запуске google.script.run добавляются флажки.После этого, когда флажок изменен, идентификатор флажка извлекается с помощью obj.target.id.Например, в случае вашего сценария, когда флажок идентификатора f1 изменяется, стиль становится block. 

function addEventListeners() {
  var checkboxes = document.getElementsByName("flavors");
  console.log(checkboxes)
  for (var i=0;i<checkboxes.length;i++){ 
    // var chkboxId = checkboxes[i].id; // Modified
    checkboxes[i].addEventListener("change", displayFlavBlocks); // Modified
  }
}

function displayFlavBlocks(obj) { // Modified
  var chkboxId = obj.target.id; // Added
  var checked = document.getElementById(chkboxId).checked;
  if (checked) {    
    if (chkboxId == "f1") {
//      document.getElementById("f1block").style.display = "block";
      document.getElementById("f1").style.display = "block";
      // do some other stuff
    }
  }
}
  • В сценарии, который вы показываете в своем вопросеID f1block не может быть использован.Если вы хотите использовать идентификатор по checkbox.id = chkboxId, это будет f1.
...