Question

我目前正在学习JavaScript，并且遇到了问题。我有两个用于两个不同“屏幕”或页面的类，我们将它们称为NewActivityScreen和CalendarScreen。在NewActivityScreen上，我有一个带有提交按钮的表单，该表单将输入保存到newActivity类中的commitButton函数内部的NewActivityScreen对象中。

submitButton.addEventListener('click', (e) => {
  //Prevents the page from loading after submit button is pressed.
  e.preventDefault();

  let newActivity = {
    name: document.getElementsByName('activity-input')[0].value,
    date: document.getElementsByName('date-input')[0].value
  }

  document.getElementById('activity-form').reset();

  this.displayActivity(newActivity);
});

执行此操作时，我想将其附加到DisplayScreen类中，因此当我按导航链接创建新的DisplayScreen时，我希望结果显示在此屏幕上。有点像这样：

displayActivity(activity) {
    const activityContainer = document.createElement('div')
    activityContainer.setAttribute('class', 'activity-container')
    const activityName = document.createElement('h4')
    const activityDate = document.createElement('h4')
    activityName.textContent = 'Activity: ' + activity.name;
    activityDate.textContent = 'Date: ' + activity.date;

    document.getElementById('main-content').appendChild(activityContainer)
    activityContainer.appendChild(activityName);
    activityContainer.appendChild(activityDate);
}

现在，问题出在我按下NewActivityScreen上的“提交”按钮后，它附加在CalendarScreen上，我的代码说应该如此。有没有一种方法可以将其附加到CalendarScreen，而页面没有两个不同的HTML section？

简而言之：我想这样做，所以当我按下“提交”按钮时，displayActivity函数将尽可能附加到CalendarScreen中。

供参考：我的代码如下https://pastebin.com/WymQ5H12

访问在另一个类中创建的方法内的对象

0 个答案: