健身追踪器点击按钮新增周模块异常问题求助

问题分析 #

你的核心问题有两个：

• 使用document.write()在页面加载完成后调用会清空当前页面内容，导致出现类似跳转新页面的现象。
• 按钮可能位于<form>标签内，点击时触发表单默认提交行为，同样会导致页面跳转。
  另外ChatGPT生成的代码存在拼写错误（document.ElementById应为document.getElementById）、多行字符串语法错误、重复id等问题，导致无法正常运行。

修正后的实现代码 #

1. 调整HTML结构 #

给所有周的模块添加一个统一容器（若尚未添加）：

<div id="week-container">
  <!-- 此处放置现有的两周输入模块 -->
  <div class="things">...</div>
  <div class="things">...</div>
</div>
<button id="add">add 1 week</button>

2. 替换原有JS脚本 #

const btn = document.getElementById("add");
const weekContainer = document.getElementById("week-container");

function plusOne(e) {
  // 阻止按钮默认行为（若按钮在表单内，可避免表单提交跳转）
  e.preventDefault();
  
  // 获取第一个周模块作为模板
  const weekTemplate = document.querySelector(".things");
  // 深度克隆模板节点
  const newWeek = weekTemplate.cloneNode(true);
  
  // 可选：给新模块设置独特标题
  const weekNumber = weekContainer.children.length + 1;
  const weekTitle = newWeek.querySelector("h2");
  if (weekTitle) {
    weekTitle.textContent = `Week ${weekNumber}`;
  }
  
  // 将新模块追加到容器末尾
  weekContainer.appendChild(newWeek);
}

btn.addEventListener("click", plusOne);

关键修复说明 #

• 移除document.write()，改用cloneNode()复制现有模块，避免重写页面内容。
• 添加e.preventDefault()阻止按钮默认提交行为，解决页面跳转问题。
• 通过模板克隆保证新模块与现有结构完全一致，无需手动编写大量重复HTML。
• 自动生成周数标题，让新增模块标识更清晰。

ChatGPT代码的问题修正要点 #

若要手动创建HTML结构，需注意：

• 拼写正确：使用document.getElementById而非document.ElementById。
• 用模板字符串（`包裹）编写多行HTML，避免语法错误。
• 避免重复id：将所有id改为类，或给新模块元素添加唯一标识（如week-${weekNumber}-sunday）。

内容的提问来源于stack exchange，提问作者belita ross