显示本地存储的多个输入

时间:2016-08-03 05:40:19

标签: javascript html local-storage

我正在尝试从包含多个对象的数组中检索本地存储中的事件“name”的值。检索后,我希望它在表日历中显示活动所在的月份。 这是我的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;
                }

     }
 }

我的问题是,如果有两个事件在1月份举行,那么如何显示这两个事件的名称而不会被另一个事件替换?

3 个答案:

答案 0 :(得分:1)

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

做这样的事情:   document.getElementById(&#34; jan&#34;)。innerHTML + =&#34; Hello world&#34;

如果您想要哪个可能是更好的解决方案,您也可以使用追加孩子。

答案 1 :(得分:0)

只做

var myArray=[
  {
    "name":"Joe",
    "zip":90210
  },
  {
    "name":"Bill",
    "zip":94109
  }
]

// implement generic find
function find (f) {
  return function(xs) {
    if (xs[0] === undefined)
      return undefined
    else if (f(xs[0]))
      return xs[0]
    else
      return find (f) (xs.slice(1))
  }
}

// implement your function using find     
function findIt (data, target) {
  var p = find (function(x) { return x.name === target }) (data) || {}
  return p.zip
}

console.log(findIt(myArray, 'Joe'))
// => 90210

console.log(findIt(myArray, 'unmatched name'))
// => undefined

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

答案 2 :(得分:0)

您需要附加其他活动。我建议您重构代码,使其成为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;
    }
}