使用Array.prototype.map.call获取<li>内容为何返回0？(Google Apps Script)

核心问题分析 #

1. 错误的属性调用：<li>元素不存在value属性，使用n.value获取内容会返回undefined，这些undefined在后续处理中被隐式转换为"0"，导致最终结果出现多个0。
2. 范围选择错误：document.getElementsByTagName("li")会获取页面所有<li>元素，可能包含无关列表项，影响结果准确性。
3. 未过滤已隐藏项：点击remove按钮后，列表项仅被设置为display:none，但仍会被选中，需要过滤这些无效项。

修正后的核心代码 #

function afterButtonSubmit() {
  var meetingDate = document.getElementById("enterDate");
  var cbdCoach = document.getElementById("selectCoach");
  var districtName = document.getElementById("selectDistrict");
  var buildingName = document.getElementById("selectBuilding");
  // 精准选择currentTeachers下的li元素
  var teacherItems = document.querySelectorAll("#currentTeachers li");
  var meetingProductivity = document.getElementById("selectProductivity");
  var generalNotes = document.getElementById("generalNotes");

  // 过滤已隐藏的项，提取教师名称（移除(remove)文本并清理空格）
  var visibleTeacherItems = Array.from(teacherItems).filter(item => item.style.display !== "none");
  var teacherNameValues = visibleTeacherItems.length === 0 ? "" : visibleTeacherItems.map(item => {
    return item.textContent.replace(/\(remove\)/g, "").trim();
  }).join(", ");

  var rowData = {
                meetingDate: meetingDate.value, 
                cbdCoach: cbdCoach.value, 
                districtName: districtName.value, 
                buildingName: buildingName.value,
                teacherName: teacherNameValues, 
                meetingProductivity: meetingProductivity.value, 
                generalNotes: generalNotes.value
                };
  google.script.run.withSuccessHandler(afterFormSubmit).addNewRow(rowData);
}

额外优化点 #

1. 修复afterFormSubmit中的笔误：
   原代码中：

   var generalNotes = document.getElementById("selectProductivity");
   selectProductivity.value = "";
   

   应修正为：

   var selectProductivity = document.getElementById("selectProductivity");
   selectProductivity.value = "";
   

2. 优化列表项创建逻辑：给教师名称添加专属容器，方便后续精准获取：

   function newElement() {
     var li = document.createElement("li");
     var inputValue = document.getElementById("selectTeacher").value;
     // 给教师名称添加专属span
     var nameSpan = document.createElement("span");
     nameSpan.className = "teacher-name";
     nameSpan.textContent = inputValue;
     li.appendChild(nameSpan);
   
     document.getElementById("currentTeachers").appendChild(li);
     document.getElementById("selectTeacher").value = "";
   
     var span = document.createElement("SPAN");
     var txt = document.createTextNode("(remove)");
     span.className = "close";
     span.appendChild(txt);
     li.appendChild(span);
   
     for (i = 0; i < close.length; i++) {
       close[i].onclick = function() {
         var div = this.parentElement;
         div.style.display = "none";
       };
     }
   }
   

   后续提取文本时可直接使用item.querySelector(".teacher-name").textContent.trim()，无需正则替换。

内容的提问来源于stack exchange，提问作者zdougr