(Js) Создание элемента метки не определено в цикле - PullRequest
Новая
       37

(Js) Создание элемента метки не определено в цикле

0 голосов
/ 03 апреля 2020

У меня есть следующий код, в котором я пытаюсь итеративно создать элемент метки 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 не может быть создан таким образом - есть ли какая-то конкретная причина, по которой он не будет работать?

1 Ответ

2 голосов
/ 03 апреля 2020

Я думаю, что вижу проблему. document.createElement('label').classList.add('day-font'); не возвращает значение. Везде, где вы используете результат classList.add, вы по существу присваиваете переменную undefined.

Я вижу этот шаблон во многих местах в вашем сценарии. Я предлагаю создать элемент и присвоить значение переменной, прежде чем пытаться манипулировать им следующим образом: 

var newDay = document.createElement('label');
newDay.classList.add('day-font');
// do even more things to newDay if you want.

В любом месте, где вы создаете новый элемент, а затем попробуйте обновить этот элемент позже, вы захотите разделить шаги так.

Дайте мне знать, если у вас есть какие-либо вопросы!

...