ローカルストレージから複数の入力を表示

Question

複数のオブジェクトを含む配列からローカル記憶域からイベントの「名前」の値を取得しようとしています。取得した後、イベントが開催されている月の下にテーブルカレンダーで表示します。私の質問は1月、言うで開催されている2つのイベントがある場合、どのように私は、イベント両方の名前が表示されない、ある

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; 
       } 

    } 
} 

：

<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のコード： はここに私のHTMLコードです誰かが他の人に取って代わることなく？

Answer 1

内部HTMLに追加する必要があります。あなたが現在行っていることは、それを置き換えることです。

はこのような何か：あなたがよりよい解決策かもしれませんしているかどう のdocument.getElementById（「1月」）をinnerHTMLの+ =「Hello World」の

またアペンド子で動作することができます。

Answer 2

だけ

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

を行うと、あなたはあなたの追加イベントを追加する必要があります https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Answer 3

でswitch文を使用することを検討してください。コードをリファクタリングして作成することをお勧めします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; 
    } 
}