如何将用户输入作为一个可以稍后调用的对象？

Question

我正在尝试在日历程序中创建一个功能，该功能允许我单击按钮来提示用户填写表单（我的尝试是“addEvent”和“Activity”功能）。然后需要将该表单添加到名为“活动”的列表中，我可以稍后调用该列表。我还制作了一个部分，该部分应该在按下提交按钮后清除表单，但这并不像我想要的那样工作。这是我到目前为止所拥有的：

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

此部分发生的情况是，我单击“添加事件”按钮，弹出我的表单，但是当我按下提交按钮时，没有任何反应，并且表单不会清除，直到我手动清除它。

Answer 1

在 html 中，将显示按钮移到其显示/隐藏的区域之外。

在Javascript中，当您设置.innerHTML时，我认为您的意思是使用newActivity而不是activity，因为activity不是变量。

请参阅我的编辑注释以了解代码片段中的具体更改。

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");
  // EDIT I think you meant newActivity, since activity does not exist
  // output.innerHTML += `<p>${activity.title} on ${activity.day} at ${activity.time}</p>`;
  output.innerHTML += `<p>${newActivity.title} on ${newActivity.day} at ${newActivity.time}</p>`;
  
  // Clear the form
  document.getElementById("title").value = '';
  document.getElementById("day").value = '';
  document.getElementById("time").value = '';
}

function toggleShow() {
  var y = document.getElementById("toggle");
  // EDIT .style.display is "" until Javascript sets it to something else
  // if (y.style.display === "none") {
  if (y.style.display !== "block") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}

/* EDIT Added all for Debug */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color:  #fed;
}

.active {
  display: inline-block;

  margin: 1rem;
  padding: 0.3rem;

  cursor: pointer;
  user-select: none;

  background-color: #bad;
  border: solid 1px brown;
  box-shadow: 2px 2px 4px black;
}

#toggle {
  display: none;

  width: max-content;
  margin: 1rem;

  /* border: solid 1px brown; */
}

.eventInputs {
  width: max-content;

  padding: 1rem;

  background-color: #cad;
  border: solid 1px brown;
  box-shadow: 2px 2px 4px black;
}

#submitButton {
  margin-top: 0.3rem;
  margin-left: 4rem;
  padding: 0.1rem 0.2rem;

  box-shadow: 2px 2px 4px black;
}

#output {
  width: max-content;
  min-width: 30rem;
  min-height: 10rem;

  margin-top: 1rem;
  padding: 0.5rem;

  background-color: #dad;
  border: solid 1px brown;
  box-shadow: 2px 2px 4px black;
}

<!-- EDIT Move your show button outside the area that it is showing/hiding -->
<a class="active" onclick="toggleShow()">+ Add Event</a>

<div class="events" id="toggle">
  <!-- EDIT Move your show button outside the area that it is showing/hiding -->
  <!-- <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>