JavaScript使用for循环创建新元素

时间：2018-12-05 10:50:54

标签： javascript html for-loop

我尝试做一个ToDoList。它应该自动创建新的ToDo。

所以我创建了一个应该自动执行此操作的函数，但是它不起作用，我认为这是一个小错误。

我希望有人能够帮助我。

了解我的代码的小词汇表：

  • “ Eintrag”是新的待办事项
  • 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>

5 个答案:

答案 0 :(得分：0)

您有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"> ' ;

答案 1 :(得分：0)

您应该将项目放入数组中

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();

答案 2 :(得分：0)

"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 ]
    ...

答案 3 :(得分：0)

这是我的版本-我只是想为您优化代码

请注意类而不是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>

答案 4 :(得分：0)

您的脚本中有几个问题。

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

相关问题
最新问题