How to take user input as an object that can be called at a later time?

I am trying to create a feature in a calendar program that allows me to click a button to prompt a user to fill out a form (my attempt at this was the “addEvent” and “Activity” functions). This form then needs to be added to a list called “activities” that I can call from at a later time. I also made a section that is supposed to clear the form after the submit button is pressed but that doesn’t work how I wanted it to. This is what I have so far:

          <div class="events" id="toggle">
            <a class="active" onclick="toggleShow()">+ Add Event</a>  
            <div class="eventInputs">
              Title: <input type ="text" id = "title"><br/><br/>
              Day:  <input type ="text" id = "day"><br/><br/>
              Time: <input type ="text" id = "time"><br/><br/>
            </div>
            <input type="button" id="submitButton" onclick="addEvent()"    value="Submit">
            <p id="output"></p>
          </div>

         <script>
          let activities = []


          function Activity(title, day, time) {
              this.title = title;
              this.day = day;
              this.time = time
          }

          function addEvent() {
              var newActivity =  new Activity(
                document.getElementById("title").value, 
                document.getElementById("day").value, 
                document.getElementById("time").value
              );
              activities.push(newActivity);

              var output = document.getElementById("output"); 
              output.innerHTML += `<p>${activity.title} on ${activity.day} at                     ${activity.time}</p>`; 

              // Clear the form 
              document.getElementById("title").value = '';
              document.getElementById("day").value = '';
              document.getElementById("time").value = '';
            }

          function toggleShow() {
              var y = document.getElementById("toggle");
              if (y.style.display === "none") {
                y.style.display = "block";
              } else {
                y.style.display = "none";
              }
          }
      </script>

What’s been happening with this section is that I click the “add event” button, and my form pops up, but when I press the submit button, nothing happens, and the form doesn’t clear until I clear it manually.