Javascript 在For循环中创建一个数组，而不在该数组上运行

我想做一个大学项目。 我应该创建“注释”，将它们添加到阵列中，并将它们保存在本地存储中。 现在，应该使用CSS3创建具有淡入效果（过渡）的注释。 在我创建第二个音符之前，一切都很完美，在这一点上，我的整个阵列再次运行，使所有音符以淡入淡出的方式出现

CSS:

这是我创建数组+注释本身的JS：

function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);
    Note();
}
function Note(){
    var note_d = "<div>";
    for (var i = 0 ; i < notes.length ; i++) {
        note_d += "<span id='fade' class='note_input'>" + "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
        note_d +=  "</span>";
    }
    note_d += "</div>";
    document.getElementById("note_div").innerHTML = note_d;
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);
}

函数AddNote（）{
var输入=document.getElementById（“txt”）.value；
变量日期=d.getDate（）+“”+月[d.getMonth（）]+“”+d.getFullYear（）；
var time=d.getHours（）+“：”+d.getMinutes（）；
var n=新的NoteCrt（输入、时间、日期）；
注：推（n）；
注（）；
}
功能说明（）{
var注释_d=“”；
对于（变量i=0；i
“+”
“+”时间：“+注[i]。时间+”
“+”日期：“+注[i]。日期；
注d+=“”；
}
注d+=“”；
document.getElementById（“note\u div”）.innerHTML=note\u d；
notes_j=JSON.stringify（notes，null，“”）；
setItem（“NOTE”，notes_j）；
notes_p=JSON.parse（notes_j）；
控制台日志（注意事项）；
}

发生的事情是，所有存在的音符都会在每次。。。

---

有什么帮助吗？

没有必要将此功能拆分为多个功能

您所需要做的就是创建新注释并将其附加到DOM中，而不是每次都重新创建所有HTML

function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);

    // store
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);

    // show
    for (var i = 0 ; i < notes.length ; i++) {
       var new_note = document.createElement("span");
       new_note.id="fade"; new_note.class="note_input";
       new_note.innerHTML += "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
    }
    document.getElementById("note_div").appendChild(new_note);
}

函数AddNote（）{
var输入=document.getElementById（“txt”）.value；
变量日期=d.getDate（）+“”+月[d.getMonth（）]+“”+d.getFullYear（）；
var time=d.getHours（）+“：”+d.getMinutes（）；
var n=新的NoteCrt（输入、时间、日期）；
注：推（n）；
//贮藏
notes_j=JSON.stringify（notes，null，“”）；
setItem（“NOTE”，notes_j）；
notes_p=JSON.parse（notes_j）；
控制台日志（注意事项）；
//展示
对于（变量i=0；i
“+”
“+”时间：“+notes[i]。时间+”
“+”日期：“+notes[i]。日期；
}
document.getElementById（“note\u div”）.appendChild（新注释）；
}

没有必要将此功能拆分为多个功能

您所需要做的就是创建新注释并将其附加到DOM中，而不是每次都重新创建所有HTML

function AddNote (){
    var input = document.getElementById("txt").value;
    var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
    var time = d.getHours() + ":" + d.getMinutes();
    var n = new NoteCrt(input,time,date);
    notes.push(n);

    // store
    notes_j = JSON.stringify(notes, null, " ");
    localStorage.setItem("NOTE",notes_j);
    notes_p = JSON.parse(notes_j);
    console.log(notes_p);

    // show
    for (var i = 0 ; i < notes.length ; i++) {
       var new_note = document.createElement("span");
       new_note.id="fade"; new_note.class="note_input";
       new_note.innerHTML += "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
    }
    document.getElementById("note_div").appendChild(new_note);
}

函数AddNote（）{
var输入=document.getElementById（“txt”）.value；
变量日期=d.getDate（）+“”+月[d.getMonth（）]+“”+d.getFullYear（）；
var time=d.getHours（）+“：”+d.getMinutes（）；
var n=新的NoteCrt（输入、时间、日期）；
注：推（n）；
//贮藏
notes_j=JSON.stringify（notes，null，“”）；
setItem（“NOTE”，notes_j）；
notes_p=JSON.parse（notes_j）；
控制台日志（注意事项）；
//展示
对于（变量i=0；i
“+”
“+”时间：“+notes[i]。时间+”
“+”日期：“+notes[i]。日期；
}
document.getElementById（“note\u div”）.appendChild（新注释）；
}

函数添加注释（）{
var输入=document.getElementById（“txt”）.value；
变量日期=d.getDate（）+“”+月[d.getMonth（）]+“”+d.getFullYear（）；
var time=d.getHours（）+“：”+d.getMinutes（）；
var n=新的NoteCrt（输入、时间、日期）；
var notes=JSON.parse（localStorage.getItem（“NOTE”））| |[]；
注：推（n）；
控制台日志（注释）；
setItem（“NOTE”，JSON.stringify（notes，null，”）；
var node_div=document.getElementById（“note_div”）；
var el=document.createElement（'span'）；
el.id=“褪色”；
el.classList.add（'note_input'）；
el.innerHTML=
"" +
“”+n.input+“
”+
"" +
“
”+
“
”+
时间：+n时间+
“
”+
“日期：”+n.日期；
节点分区附加子节点（el）；
}

您应该注意，您似乎正在将id

fade

分配给多个跨度。如果是这样的话，你应该考虑把它变成一个类。< /P> <代码>函数AddiNoT（）{ var输入=document.getElementById（“txt”）.value； 变量日期=d.getDate（）+“”+月[d.getMonth（）]+“”+d.getFullYear（）； var time=d.getHours（）+“：”+d.getMinutes（）； var n=新的NoteCrt（输入、时间、日期）； var notes=JSON.parse（localStorage.getItem（“NOTE”））| |[]； 注：推（n）； 控制台日志（注释）； setItem（“NOTE”，JSON.stringify（notes，null，”）； var node_div=document.getElementById（“note_div”）； var el=document.createElement（'span'）； el.id=“褪色”； el.classList.add（'note_input'）； el.innerHTML= "" + “”+n.input+“

”+ "" + “
”+ “
”+ 时间：+n时间+ “
”+ “日期：”+n.日期； 节点分区附加子节点（el）； }

---

您应该注意，您似乎正在将id

fade

分配给多个跨度。如果是这样的话，你应该考虑把它变成一个类。

你应该创建一个新的DOM节点，并把它附加到一个O.NoDEYDIV。你应该创建一个新的DOM节点，并把它附加到一个O.NoDEYDIV。它只创建另一个DIV并发布所有的注释，放在它们所在的地方创建的第一个注释，而且它们在全球范围内都会受到淡入效应的影响。这是工作吗？弄清楚什么是音符，什么不是音符是很难的；别小气！谢谢你的帮助！！！！它只是在第一个notes下面创建一个terdiv部分，并在那里重新创建整个数组+newnoterright。你能做一个JSFIDLE让我看看发生了什么吗？基本上，我删除了循环，并创建了一个ShowNote函数，它接受任何note数据对象。这样，就可以使用它

function AddNote (){
  var input = document.getElementById("txt").value;
  var date = d.getDate() + " " + months[d.getMonth()] + " " + d.getFullYear();
  var time = d.getHours() + ":" + d.getMinutes();
  var n = new NoteCrt(input, time, date);

  var notes = JSON.parse(localStorage.getItem("NOTE")) || [];
  notes.push(n);
  console.log(notes);
  localStorage.setItem("NOTE", JSON.stringify(notes, null, " "));

  var node_div = document.getElementById("note_div");
  var el = document.createElement('span');

  el.id = "fade";
  el.classList.add('note_input');
  el.innerHTML =
    "<div class='flow'>" +
      "<p>" + n.input + "</p>" +
    "</div>" +
    "</br>" +
    "</br>" +
    "Time:  " + n.time +
    "</br>" +
    "Date:  " + n.date;
  node_div.appendChild(el);
}