将<a>元素</a>值<a>从客户端传递到服务器端函数</a>

Question

我有一个带复选框（ <input> ）和相应名称（ <a> ）的侧边栏。

我无法从<a>标签获取值。

我需要当用户勾选复选框并按下按钮以获取相应名称的值， 并将名称传递给后端函数以从工作表数据中获取该名称的日历 。

我编写了这段代码并记录了数据（在后端函数的最开始记录了名称参数），并且首先在日志中有正确的名称。

但是，在没有更改代码的情况下，我停止接收任何日志，因此我假设后端函数已停止被调用。

我的代码出了什么问题？

//get button by id, on click run function
document.getElementById("btn").addEventListener("click", requestCheckedCalendars)

客户端功能：

 //getting checked checkboxes and names function getCheckedNames() { //getting all checkboxes var allCheckboxes = Array.from(document.getElementsByClassName("filled-in")); //getting all <a> tag elements as a native Array. var names = Array.from(document.getElementsByTagName("a")); var namesArr = [] for (var i = 1; i < allCheckboxes.length; i++) { //checked/unchecked property of a checkbox var check = allCheckboxes[i].checked //if checked if (check === true) { //shift to get corresponding names var j = i + 1 //getting a name value var name = names[j].firstChild.nodeValue; //pushing a name to the array namesArr.push(name) } } return namesArr } //getting calendars for chosen names from backend function requestCheckedCalendars() { var chosenNames = getCheckedNames(); // Submit these names to the backend, to receive their calendar events. google.script.run .withUserObject(chosenNames) .withSuccessHandler(requestCalendarEvents) .loopToGetCals(JSON.stringify(chosenNames)) } 

一个Html模板 - 我在循环脚本属性时创建了包含名称的<a>元素：

  //creating a new <a> tag var newATag = document.createElement("a") //set a class to a new tag newATag.setAttribute("class", "collection-item"); // add the URL attribute newATag.setAttribute("href", "https://www.blah.com"); //setting unique IDs newATag.setAttribute("id", "a" + i); // Add names to it var newText = document.createTextNode(name); //append the text with names to the tag newATag.appendChild(newText); //add item to the mother collection element collection.appendChild(newATag); 

集合元素（我放置<a>元素的地方）来自MaterialixeCss网站：

 <div class="collection" id = "coll"> 
 </div>   

  //collection element from Materializecss site
   var collection = document.getElementById("coll")

Answer 1

从复选框中获取值

html片段：

   <br /><input type="checkbox" id="chk1" name="Checks" value="1" /><label for="chk1">One</label>
   <br /><input type="checkbox" id="chk2" name="Checks" value="2" /><label for="chk2">Two</label>
   <br /><input type="checkbox" id="chk3" name="Checks" value="3" /><label for="chk3">Three</label>
   <br /><input type="button" id="chkbtn" value="SaveChecks" onClick="saveChecks();" />

JavaScript的：

function saveChecks() {
    var chA=document.querySelectorAll('input[type="checkbox"][name="Checks"]:checked');
    var cbA=[];
    console.log('Checkboxes: %s',JSON.stringify(chA));
    for(var i=0;i<chA.length;i++) {
      console.log('id: %s name: %s value: %s',chA[i].id,chA[i].name,chA[i].value);
      cbA.push({id:chA[i].id,name:chA[i].name,value:chA[i].value});
    }
    google.script.run.displayCheckBoxes(cbA);
  }

一些用于显示值的Google脚本：

function displayCheckBoxes(chA) {
  var ss=SpreadsheetApp.getActive();
  var html='';
  for(var i=0;i<chA.length;i++) {
    html+=Utilities.formatString('<br />id: %s name: %s value: %s', chA[i].id,chA[i].name,chA[i].value);
  }
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, 'Checked Boxes');
}

渲染的Html：

“渲染”对话框：

来自锚点的值

function getAnchors() {
      var aA=document.getElementsByTagName("a");
      for(var i=0;i<aA.length;i++) {
        //for(key in aA[i]){console.log('key: %s value: %s',key,aA[i][key]);} //display all possible values
        console.log('href: %s text: %s',aA[i].href, aA[i].text);
      }
    }