日历程序：用户输入转为可调用对象及表单提交失效、无法自动清空问题求助

看起来你已经搭好了核心框架，问题主要出在代码的细节疏漏上，我帮你一步步排查和修正：

1. 提交无反应+表单不清空的核心原因 #

在addEvent函数里，你拼接输出HTML的时候用了${activity.title}，但你刚刚创建的活动对象是newActivity，这里变量名写错了！JavaScript找不到activity这个未定义的变量，会直接抛出错误，导致后面的表单清空代码根本没机会执行——这就是提交后没反应、表单也不清空的罪魁祸首。

修正后的addEvent函数：

function addEvent() {
    // 正确获取表单值并创建活动对象
    const newActivity =  new Activity(
      document.getElementById("title").value, 
      document.getElementById("day").value, 
      document.getElementById("time").value
    );
    activities.push(newActivity);

    const output = document.getElementById("output"); 
    // 这里把activity改成newActivity，和上面的变量名对应
    output.innerHTML += `<p>${newActivity.title} on ${newActivity.day} at ${newActivity.time}</p>`; 

    // 现在清空代码会正常执行了
    document.getElementById("title").value = '';
    document.getElementById("day").value = '';
    document.getElementById("time").value = '';
  }

2. 优化toggleShow函数（解决逻辑不符预期的问题） #

原代码里的toggleShow是控制整个#togglediv的显示/隐藏，点击后会把“+ Add Event”按钮也一起藏起来，这显然不符合“点击按钮显示表单”的预期。我们应该改成只控制.eventInputs这个表单区域的显示状态：

第一步：给表单区域加默认隐藏样式

修改HTML里的eventInputsdiv：

<div class="eventInputs" style="display:none;">
  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>

第二步：修正toggleShow函数

function toggleShow() {
    // 改成操作eventInputs的显示状态
    const formArea = document.querySelector(".eventInputs");
    if (formArea.style.display === "none") {
      formArea.style.display = "block";
    } else {
      formArea.style.display = "none";
    }
}

3. 额外小优化建议 #

为了让用户输入更规范，减少手动输入的错误，你可以把input的类型换成更合适的：

• Day输入框改成type="date"，用户可以直接选择日期，不用手动输入文本
• Time输入框改成type="time"，系统会提供时间选择器

Day:  <input type ="date" id = "day"><br/><br/>
Time: <input type ="time" id = "time"><br/><br/>

修正后的完整代码 #

<div class="events" id="toggle">
  <a class="active" onclick="toggleShow()">+ Add Event</a>  
  <div class="eventInputs" style="display:none;">
    Title: <input type ="text" id = "title"><br/><br/>
    Day:  <input type ="date" id = "day"><br/><br/>
    Time: <input type ="time" 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() {
      const newActivity =  new Activity(
        document.getElementById("title").value, 
        document.getElementById("day").value, 
        document.getElementById("time").value
      );
      activities.push(newActivity);

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

      // 清空表单
      document.getElementById("title").value = '';
      document.getElementById("day").value = '';
      document.getElementById("time").value = '';
  }

  function toggleShow() {
      const formArea = document.querySelector(".eventInputs");
      if (formArea.style.display === "none") {
        formArea.style.display = "block";
      } else {
        formArea.style.display = "none";
      }
  }
</script>

现在再测试一下：点击“+Add Event”会显示表单，填写后提交，活动会被加入activities数组，同时表单自动清空，输出区域也会显示刚添加的活动~

备注：内容来源于stack exchange，提问作者user27445443