Отображение нескольких входных данных из локального хранилища

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 + = «Привет мир»

Вы также можете работать с дописывания ребенка, если вы хотите, к которому может быть лучшим решением.

Answer 2

Вобще

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

и рассмотреть возможность использования заявления переключателей на 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; 
    } 
}