JavaScript создает новый элемент с циклом for

Question

Я пытаюсь сделать ToDoList.Он должен автоматически создавать новые задачи.

Итак, я создал функцию, которая должна делать это автоматически, но она не работает, я думаю, это небольшая ошибка.

Я надеюсь, что кто-то сможет помочья.

Небольшой глоссарий, чтобы понять мой код:

• "Eintrag" это новый ToDo
• Ja = Да
• Nein = Нет
• Erledigt = Готово
• Wichtig = Важно
• Дата = = дата
• Aufgabe = задание

Вот мой код

var eintrag1 = {
  Datum: "31.11.12",
  Aufgabe: "Baden",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag2 = {
  Datum: "31.11.12",
  Aufgabe: "Baden1",
  erledigt: "nein",
  wichtig: "nein"
};
var eintrag3 = {
  Datum: "31.11.12",
  Aufgabe: "Baden2",
  erledigt: "ja",
  wichtig: "ja"
};
var eintrag4 = {
  Datum: "31.11.12",
  Aufgabe: "Baden3",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag5 = {
  Datum: "31.11.12",
  Aufgabe: "Baden4",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag6 = {
  Datum: "31.11.12",
  Aufgabe: "Baden5",
  erledigt: "ja",
  wichtig: "ja"
};
var eintrag7 = {
  Datum: "31.11.12",
  Aufgabe: "Baden6",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag8 = {
  Datum: "31.11.12",
  Aufgabe: "Baden7",
  erledigt: "nein",
  wichtig: "nein"
};
var eintrag9 = {
  Datum: "31.11.12",
  Aufgabe: "Baden8",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag10 = {
  Datum: "31.11.12",
  Aufgabe: "Bade9n",
  erledigt: "ja",
  wichtig: "nein"
};
var eintrag12 = {
  Datum: "31.11.12",
  Aufgabe: "Baden10",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag13 = {
  Datum: "31.11.12",
  Aufgabe: "Baden11",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag14 = {
  Datum: "31.11.12",
  Aufgabe: "Baden12",
  erledigt: "ja",
  wichtig: "nein"
};
var eintrag15 = {
  Datum: "31.11.12",
  Aufgabe: "Baden13",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag16 = {
  Datum: "31.11.12",
  Aufgabe: "Baden14",
  erledigt: "nein",
  wichtig: "nein"
};
var eintrag17 = {
  Datum: "31.11.12",
  Aufgabe: "Baden15",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag18 = {
  Datum: "31.11.12",
  Aufgabe: "Baden16",
  erledigt: "ja",
  wichtig: "nein"
};
var eintrag19 = {
  Datum: "31.11.12",
  Aufgabe: "Baden17",
  erledigt: "nein",
  wichtig: "nein"
};
var eintrag20 = {
  Datum: "31.11.12",
  Aufgabe: "Baden18",
  erledigt: "nein",
  wichtig: "ja"
};
var eintrag21 = {
  Datum: "31.11.12",
  Aufgabe: "Baden19",
  erledigt: "ja",
  wichtig: "nein"
};
var eintrag22 = {
  Datum: "31.11.12",
  Aufgabe: "Baden20",
  erledigt: "ja",
  wichtig: "nein"
};
var eintrag23 = {
  Datum: "31.11.12",
  Aufgabe: "Baden21",
  erledigt: "nein",
  wichtig: "ja"
};

var e = document.querySelector("p");
var checked = "";
var checkede = "";
var check = function(wert) {
  if (wert === "ja") {
    return ("checked");
  }
}
var auto = function() {
  for (var i = 1; i < 23; i++) {
    var neuein = "eintrag" + i.toString();
    var dat = neuein + ".Datum";
    var auf = neuein + ".Aufgabe";
    var erl = neuein + ".erledigt";
    var wich = neuein + ".wichtig";


    e.innerHTML = e.innerHTML + ' <p>  ' +
      ' <input type="text" placeholder="Datum" value = ' + dat + '> ' +
      ' <input type="text" value=' + auf + '>' +
      ' Erledigt <input type="checkbox" name="erledigt" ' + check(erl) + ' >' +
      ' Wichtig <input type="checkbox" name="Wichtig"  ' + check(wich) + ' > ' +
      ' <input type="button" value="Bearbeiten" id="edit"> ' +
      ' <input type="button" value="Speichern" id="save">' +
      ' <input type="button" value="Löschen" id="delete"> ' +
      ' </p>';

  }
}

<form>
  <p>
    <input type="text" placeholder="Datum" value="Datum">
    <input type="text"> Erledigt <input type="checkbox" name="erledigt" value="Erledigt"> Wichtig <input type="checkbox" name="Wichtig" value="Wichtig">
    <input type="button" value="Bearbeiten" id="edit">
    <input type="button" value="Speichern" id="save">
    <input type="button" value="Löschen" id="delete">

  </p>
  <p>
    <input type="button" value="Liste Speichern" id="savelist">
    <input type="button" value="Exportieren" id="export">
  </p>
</form>

Answer 1

В вашем скрипте есть несколько проблем.

1. Вы не вызываете функцию auto ().

2.В вашей функции авто вы упомянули var neuein = "eintrag" + i.toString();var dat = neuein + ".Datum";, яповерьте, здесь вы хотите получить доступ к значениям объявленных объектов, скажем var eintrag1 = { Datum: "31.11.12", Aufgabe: "Baden", erledigt: "nein", wichtig: "ja" };, но ваш var dat будет просто содержать строку eintrag1.Datum, а не ссылку на значение объекта eintrag1.Datum which is 31.11.12

Чтобы достичь того, что вы хотели, вы должны использовать var dat = eval(neuein)["Datum"]

Проверьте эту ссылку и дайте нам знать, если это то, что вы намеревались случиться https://stackblitz.com/edit/js-hcvj1g

Answer 2

Вот моя версия - я просто хотел оптимизировать код для вас

Обратите внимание на класс вместо ID и использование точечной нотации.Вы можете сделать neuein["Datum"] вместо neuein.Datum

Используя jQuery, вы также можете легко использовать клон вместо создания строки путем конкатенации

var eintrag = [{ Datum: "31.11.12", Aufgabe: "Baden", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden1", erledigt: "nein", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden2", erledigt: "ja", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden3", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden4", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden5", erledigt: "ja", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden6", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden7", erledigt: "nein", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden8", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Bade9n", erledigt: "ja", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden10", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden11", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden12", erledigt: "ja", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden13", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden14", erledigt: "nein", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden15", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden16", erledigt: "ja", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden17", erledigt: "nein", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden18", erledigt: "nein", wichtig: "ja"},{ Datum: "31.11.12", Aufgabe: "Baden19", erledigt: "ja", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden20", erledigt: "ja", wichtig: "nein"},{ Datum: "31.11.12", Aufgabe: "Baden21", erledigt: "nein", wichtig: "ja"}]

window.addEventListener("load",function() {
  var e = [];

  for (var i = 1, n= eintrag.length; i < n; i++) {
    var neuein = eintrag[i];
    var dat  = neuein.Datum;
    var auf  = neuein.Aufgabe;
    var erl  = neuein.erledigt==="ja"?" checked":"";
    var wich = neuein.wichtig ==="ja"?" checked":"";


    e.push(' <p>  ' +
      ' <input type="text" placeholder="Datum" value = ' + dat + '> ' +
      ' <input type="text" value=' + auf + '>' +
      ' Erledigt <input type="checkbox" name="erledigt" ' + erl + ' >' +
      ' Wichtig <input type="checkbox" name="Wichtig"  '  + wich + ' > ' +
      ' <input type="button" value="Bearbeiten" class="edit"> ' +
      ' <input type="button" value="Speichern" class="save">' +
      ' <input type="button" value="Löschen" class="delete"> ' +
      ' </p>');
  }
  document.querySelector("p").innerHTML += e.join("");
});

<form>
  <p>
    <input type="text" placeholder="Datum" value="Datum">
    <input type="text"> Erledigt <input type="checkbox" name="erledigt" value="Erledigt"> Wichtig <input type="checkbox" name="Wichtig" value="Wichtig">
    <input type="button" value="Bearbeiten" class="edit">
    <input type="button" value="Speichern" class="save">
    <input type="button" value="Löschen" class="delete">

  </p>
  <p>
    <input type="button" value="Liste Speichern" id="savelist">
    <input type="button" value="Exportieren" id="export">
  </p>
</form>

Answer 3

Вы должны поместить свои элементы в массив:

var eintrage = [
    {Datum:"31.11.12", Aufgabe:"Baden" ,erledigt:"nein" ,wichtig:"ja"}, //array items are seperated by a comma
    {Datum:"31.11.12", Aufgabe:"Baden1" ,erledigt:"nein" ,wichtig:"nein"},
    ...
];

Их можно перебрать в массиве следующим образом:

var auto = function() {
    for (var i = 1; i < eintrage.length; i++) { //eintrage.length equals the length of the array (how many items there are)
        var neuein = eintrage[i]; //you can access an index of an array like so: array[index]
        var dat = neuein.Datum; //you can acces methods of objects like so: object.method
        var auf = neuein.Aufgab;
        var erl = neuein.erledigt;
        var wich = neuein.wichtig; 

        ...

Наконец, не забудьте вызвать вашу функцию:

auto();

Answer 4

"eintrag1" (строка) отличается от eintrag1 (имя переменной), и нет хорошего способа получить переменную из строки.Для хранения последовательности вещей используйте массив, а не пронумерованные переменные.

var eintragen = [{
    Datum: "31.11.12",
    Aufgabe: "Baden"
},{
    Datum: "31.11.12",
    Aufgabe: "Baden1"
}]

for ( var i = 0; i < eintragen.length; i++ ) {
    var neuein = eintragen[ i ]
    ...

Answer 5

У вас есть 2 закрывающих тега и пара недостающих HTML-тегов, поэтому я предполагаю, что это не весь код.

Если вы устанавливаете точку останова в функции, если она не достигает точки останова, вы должны проверить место, где вы ее на самом деле вызываете (так как я не могу видеть это в коде), и, во-вторых, удалить теги

в вашем сценарии.Поскольку вы уже добавляете код в тег

, а вложение тегов

невозможно.Вторая, скорее всего, причина, по которой он не работает.поэтому;

изменить

 e.innerHTML = e.innerHTML + ' <p>  ' +
                               ' <input type="text" placeholder="Datum" value = '+ dat +'> ' +
                               ' <input type="text" value='+ auf +'>' +
                               ' Erledigt <input type="checkbox" name="erledigt" ' + check(erl) + ' >' +
                               ' Wichtig <input type="checkbox" name="Wichtig"  ' + check(wich) + ' > ' +
                               ' <input type="button" value="Bearbeiten" id="edit"> ' +
                               ' <input type="button" value="Speichern" id="save">' +
                               ' <input type="button" value="Löschen" id="delete"> ' +
                               ' </p>';

К:

 e.innerHTML = e.innerHTML + 
                               ' <input type="text" placeholder="Datum" value = '+ dat +'> ' +
                               ' <input type="text" value='+ auf +'>' +
                               ' Erledigt <input type="checkbox" name="erledigt" ' + check(erl) + ' >' +
                               ' Wichtig <input type="checkbox" name="Wichtig"  ' + check(wich) + ' > ' +
                               ' <input type="button" value="Bearbeiten" id="edit"> ' +
                               ' <input type="button" value="Speichern" id="save">' +
                               ' <input type="button" value="Löschen" id="delete"> ' ;