显示来自本地存储的多个输入

Question

我想从包含多个对象的数组的本地存储中检索事件的“名称”的值。检索完成后，我希望它在事件保存的月份下以表格日历显示。 这里是我的HTML代码：

<table border="1" id="list" style="width:40%;margin:auto"> 
<caption style="text-align:center; margin:5px; font-weight:bold; font- size:30px; margin-bottom:10px"> 
LIST OF EVENTS 
</caption> 
<button id="show"onclick="addToCalendar();">Show</button> 

<tr><th>Month</th><th>Events Name</th></tr> 
<tr><td>January</td><td id="jan"></td></tr> 
<tr><td>February</td><td id="feb"></td></tr> 
<tr><td>March</td><td id="mar"></td></tr> 
<tr><td>April</td><td id="apr"></td></tr> 
<tr><td>May</td><td id="may"></td></tr> 
<tr><td>June</td><td id="jun"></td></tr> 
<tr><td>July</td><td id="july"></td></tr> 
<tr><td>August</td><td id="aug"></td></tr> 
<tr><td>September</td><td id="sept"></td></tr> 
<tr><td>October</td><td id="oct"></td></tr> 
<tr><td>November</td><td id="nov"></td></tr> 
<tr><td>December</td><td id="dec"></td></tr> 

</table> 

我的JavaScript代码：

function addToCalendar() { 
    var index; 

    for (index=0; index<events.length; ++index) { 
     var entry=events[index]; 
     var d=entry.date; 
     var date=new Date(d); 

     var n=entry.name; 

     var month = new Array(); 
      month[0] = "January"; 
      month[1] = "February"; 
      month[2] = "March"; 
      month[3] = "April"; 
      month[4] = "May"; 
      month[5] = "June"; 
      month[6] = "July"; 
      month[7] = "August"; 
      month[8] = "September"; 
      month[9] = "October"; 
      month[10] = "November"; 
      month[11] = "December"; 

     var m=month[date.getMonth()]; 
      if (m==month[0]) 
       { 
       document.getElementById("jan").innerHTML=n; 
       } 

      if (m==month[1]) 
       { 
       document.getElementById("feb").innerHTML=n; 
       } 
      if (m==month[2]) 
       { 
       document.getElementById("mar").innerHTML=n; 
       } 
      if (m==month[3]) 
       { 
       document.getElementById("apr").innerHTML=n; 
       } 
      if (m==month[4]) 
       { 
       document.getElementById("may").innerHTML=n; 
       } 
      if (m==month[5]) 
       { 
       document.getElementById("jun").innerHTML=n; 
       } 
      if (m==month[6]) 
       { 
       document.getElementById("july").innerHTML=n; 
       } 
      if (m==month[7]) 
       { 
       document.getElementById("aug").innerHTML=n; 
       } 
      if (m==month[8]) 
       { 
       document.getElementById("sept").innerHTML=n; 
       } 
      if (m==month[9]) 
       { 
       document.getElementById("oct").innerHTML=n; 
       } 
      if (m==month[10]) 
       { 
       document.getElementById("nov").innerHTML=n; 
       } 
      if (m==month[11]) 
       { 
       document.getElementById("dec").innerHTML=n; 
       } 

    } 
} 

我的问题是，如果有在说，一月举行两次活动，我怎么同时显示本次活动的名称没有一个被另一个替代？

Answer 1

您需要附加到您的内部HTML。你目前正在做的是取代它。

做这样的事情： 的document.getElementById（“扬”）的innerHTML + =“Hello World”的

您还可以使用附加的孩子，如果你想这可能是更好的解决方案工作。

Answer 2

只是做

document.getElementById("WhichEverMonth").innerHTML += n; 

，并考虑使用switch语句在 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Answer 3

您还需要附加的其他事件。我会推荐重构你的代码，使其成为DRY：

function addToCalendar(events) { 
    var monthIds = ["jan", "feb", "mar", "apr", "may", "jun", "july", "aug", "sept", "oct", "nov", "dec"]; 
    var index; 

    for (index = 0; index < events.length; ++index) { 
     var entry = events[index];   
     var dateOfEvent = new Date(entry.date); 
     var monthOfEvent = dateOfEvent.getMonth(); 

     var entryMarkup = entry.name + "<br />"; 
     var monthElement = document.getElementById(monthIds[monthOfEvent]); 
     monthElement.innerHTML += entryMarkup; 
    } 
}