多步骤注册表单返回按钮失效问题求助（JS/HTML）

返回按钮失效的核心原因 #

你的返回按钮是<button>元素，未指定type属性时，浏览器默认将其识别为submit类型。点击该按钮会触发所在表单的提交行为，导致页面刷新——你的backPageFunction逻辑还没执行完成，页面就重新加载了，所以看不到预期效果。

优化方案：改用Class切换状态（替代修改ID） #

你希望通过修改class来控制元素状态，这比修改ID更合理（ID是唯一标识，频繁修改易引发选择器冲突，且ID选择器优先级过高不利于样式维护）。以下是完整的重构步骤：

1. 修正按钮类型 #

给所有功能按钮添加type="button"，阻止默认表单提交：

<!-- 下一步按钮 -->
<button type="button" class="nextbtnform1" id="nextbtnform1" onclick="nextPageFunction()">ثبت اطلاعات و ادامه</button>

<!-- 返回按钮 -->
<button type="button" class="backbtnform2" id="backbtnform2" onclick='backPageFunction()'>بازگشت و ویرایش اطلاعات</button>

2. 重构CSS：用Class控制显示状态 #

将原ID选择器替换为基础类+状态类的结构，简化样式逻辑：

/* 所有表单容器的基础样式 */
.containerform {
  position: absolute;
  width: 982px;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  transition: 1s;
  margin: 40px auto;
}

/* 不同表单容器的高度差异 */
.containerform1 {
  height: 600px;
}

.containerform2 {
  height: 270px;
}

/* 激活状态：显示元素 */
.containerform.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0%);
}

/* 非激活状态：隐藏元素 */
.containerform.inactive {
  opacity: 0;
  pointer-events: none;
}

/* 第一个表单的隐藏动画 */
.containerform1.inactive {
  transform: translateX(100%);
}

/* 第二个表单的隐藏动画 */
.containerform2.inactive {
  transform: translateX(-100%);
}

3. 调整HTML容器的初始Class #

给表单容器设置初始状态的class：

<!-- 第一个表单：初始激活 -->
<div id="containerform1" class="containerform containerform1 active">
  <!-- 表单内容 -->
</div>

<!-- 第二个表单：初始隐藏 -->
<div id="containerform2" class="containerform containerform2 inactive">
  <!-- 表单内容 -->
</div>

4. 重构JS函数：操作Class切换状态 #

不再修改ID，而是通过classList添加/移除状态类：

function backPageFunction() {
  // 切换表单状态：显示第一个，隐藏第二个
  const form1 = document.querySelector(".containerform1");
  const form2 = document.querySelector(".containerform2");
  
  form1.classList.remove("inactive");
  form1.classList.add("active");
  form2.classList.remove("active");
  form2.classList.add("inactive");

  // 更新进度条和步骤文字样式
  document.getElementById('progress-step1').style.width = '250px';
  document.querySelector('.step-col2').style.fontSize = '15px';
  document.querySelector('.step-col1').style.fontSize = '18px';
  document.querySelector('.step-col1').style.color = '#f0eaea';
  document.querySelector('.step-col2').style.color = '#546E7A';
};

function nextPageFunction() {
  // 切换表单状态：隐藏第一个，显示第二个
  const form1 = document.querySelector(".containerform1");
  const form2 = document.querySelector(".containerform2");
  
  form1.classList.remove("active");
  form1.classList.add("inactive");
  form2.classList.remove("inactive");
  form2.classList.add("active");

  // 更新进度条和步骤文字样式
  document.getElementById('progress-step1').style.width = '470px';
  document.querySelector('.step-col1').style.fontSize = '15px';
  document.querySelector('.step-col2').style.fontSize = '18px';
  document.querySelector('.step-col2').style.color = '#f0eaea';
  document.querySelector('.step-col1').style.color = '#546E7A';
};

内容的提问来源于stack exchange，提问作者Mohsen Abedi