javascript - (Js) 循环中未定义的标签元素创建
问题描述
我有以下代码,我尝试在其中迭代地创建标签元素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."
}
undefined
TypeError: undefined is not an object (evaluating 'newDay.textContent = key.charAt(0)')
我似乎无法弄清楚为什么newDay
不能以这种方式创建元素 - 是否有特殊原因这不起作用?
解决方案
我想我看到了这个问题。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.
在您创建新元素并稍后尝试更新该元素的任何地方,您都希望像这样将这些步骤分开。
如果您有任何问题,请告诉我!
推荐阅读
- python - Openpyxl:将数据框添加到excel中的范围
- tensorflow - Tensorflowsharp 和 Retinanet——如何在图形运行时确定要获取的内容?
- delphi - Delphi FMX OSX 分段故障 11
- r - 如何使用 R data.table/data.frame 将长字符串拆分/解析为表格数据?
- c# - Wpf 样式 ispressed 属性不会持续
- c++ - 迭代字符串集时没有可行的转换
- javascript - 使用数组没有重复的随机非数字分配
- ios - 如何水平居中动态宽度的collectionView项目?
- swift - Siri 快捷方式:如何通过我的应用检索捐赠的 INInteraction 列表
- python - 如何从列表中删除某些值的对象?