无法在数组中显示多个事物

我做了一个数组,将输入的内容存储到本地存储中,如下所示

<form name="myform" action="" method="GET">
   Event Name: <INPUT TYPE="text" NAME="name" VALUE="" id="input1"><br />
   Event Date and Time: <INPUT TYPE="datetime-local" NAME="date" Value="" id="input2"><br />
   Event Location: <INPUT TYPE="text" NAME="location" VALUE="" id="input3"><br />
   Event Notes: <INPUT TYPE="text" NAME="notes" VALUE="" id="input4"><br />
   <button onclick="storeValues(event)" type=submit>Submit</button>
</form>

<script>
function storeValues(e) {
    e.preventDefault();

    let storedEvents = JSON.parse(localStorage.getItem("Events")) || [];

    const newEventDetails = {
      name: document.getElementById('input1').value,
      dateTime: document.getElementById('input2').value,
      location: document.getElementById('input3').value,
      notes: document.getElementById('input4').value
    }
    storedEvents.push(newEventDetails);
    localStorage.setItem("Events", JSON.stringify(storedEvents));

     console.log('storedEvents', storedEvents);

}
</script> 

目前,我能够像这样显示它们,但是一次只能显示1,如果我再次添加此代码,但是尝试在数组中显示其他内容,则也不会显示。

<h2>All Upcoming Events</h2> 
<h2 id='input1'>&nbsp;</h2>
<h2 id='input2'>&nbsp;</h2>
<h2 id='input3'>&nbsp;</h2>
<h2 id='input4'>&nbsp;</h2>

<!-- running script here will populate H2's with values from local storage -->
<script>
   const renderEvent = (event) => {
  document.getElementById('input1').textContent = event.name;
  document.getElementById('input2').textContent = event.dateTime;
  document.getElementById('input3').textContent = event.location;
  document.getElementById('input4').textContent = event.notes;
};
    const index = 0; // for example: display 5th event saved
const storedEvents = JSON.parse(localStorage.getItem("Events"));
if (!storedEvents) throw new Error('No events');
const event = storedEvents[index];
renderEvent(event);

</script>
评论