(Js) 循环中未定义标签元素创建

Question

我有以下代码，我在其中尝试迭代创建标签元素newDay（我附加newDayIcon并最终附加到newWeekSet：...console.log(dict);  var newLine = document.createElement('div').classList.add('list-group-item');  var newButton = document.createElement('div').classList.add('add-button');  var newTemp = document.createElement('a');  var newName = document.createElement('a').classList.add('name-font');  var newWeekSet = document.createElement('div').classList.add('right-align');  Object.entries(dict).forEach(function([key, value]) {     console.log(key, value);     var newDay = document.createElement('label').classList.add('day-font');     var newDayIcon;     console.log(newDay);     newDay.textContent = key.charAt(0);     if (value) {       newDayIcon = document.createElement('i').classList.add('far', 'fa-check-circle', 'fa-xs')       newDayIcon.style.color = 'Blue';     }      else {       newDayIcon = document.createElement('i').classList.add('far', 'fa-times-circle', 'fa-xs')       newDayIcon.style.color = 'Orange';     }     newDay.appendChild(newDayIcon);     newWeekSet.appendChild(newDay);  });  var newMoveIcon = document.createElement('i').classList.add('fas', 'fa-bars');  newButton.id = 'schedule-'+i++;  newLine.append(newButton, newName, newWeekSet, newMoveIcon);  dashboard.appendChild(newLine);}具有以下电流输出：  Friday: null,  Monday: Object {    EndTime: "12:50 A.M.",    StartTime: "12:55 A.M."  },  Saturday: null,  Sunday: Object {    EndTime: "12:50 A.M.",    StartTime: "12:55 A.M."  },  Thursday: null,  Tuesday: null,  Wednesday: null}"Sunday" Object {  EndTime: "12:55 A.M.",  StartTime: "12:59 A.M."}undefinedTypeError: undefined is not an object (evaluating 'newDay.textContent = key.charAt(0)') 我似乎无法弄清楚为什么newDay不能以这种方式创建元素 - 是否有特殊原因这不起作用？

Answer 1

我想我看到了这个问题。document.createElement('label').classList.add('day-font');不返回值。无论您在哪里使用结果，classList.add本质上都是将 var 分配给undefined.

我在你的脚本中的很多地方都看到了这种模式。我建议先创建元素并将值分配给 var，然后再尝试像这样操作它：

var newDay = document.createElement('label');

newDay.classList.add('day-font');

// do even more things to newDay if you want.

无论您在哪里创建新元素，然后稍后尝试更新该元素，您都需要像这样将步骤分开。

如果您有任何疑问，请告诉我！