多步骤用户注册表单切换后返回首页及style.marginLeft失效问题

Got it, let's break down what's going wrong with your multi-step registration form and fix it step by step:

1. Why the Page Reverts Immediately After Clicking "Next" #

The biggest issue here is that your <button> elements inside the <form> are defaulting to submit behavior. When you click a button without specifying a type, browsers treat it as type="submit", which triggers the form to submit—this reloads the page, sending you right back to the first step.

To fix this, you have two easy options:

• Add type="button" to all your navigation buttons (Next/Previous) so they don't trigger form submission.
• Or, call event.preventDefault() inside your click event listeners to stop the default submit action.

2. Fixing the Broken marginLeft for the Previous Button #

In your JavaScript code, the previous button's marginLeft value has a random invalid placeholder ([enter link description here][1]0%). You need to replace that with just "0%" to reset the slide position correctly.

Modified Working Code #

Updated HTML #

<form>
  <div class="page slidePage">
    <div class="field">
      <div class="label">Username*</div>
      <input type="text">
    </div>
    <div class="field">
      <div class="label">Firstname*</div>
      <input type="text">
    </div>
    <div class="field">
      <div class="label">Lastname*</div>
      <input type="text">
    </div>
    <div class="field">
      <!-- Added type="button" to prevent form submission -->
      <button type="button" class="nxt nextBtn-1">Next</button>
    </div>
  </div>
  <div class="page">
    <div class="field">
      <div class="label">Email</div>
      <input type="text">
    </div>
    <div class="field">
      <div class="label">Password</div>
      <input type="password"> <!-- Changed to password type for security -->
    </div>
    <div class="field">
      <div class="label">Password Confirmation</div>
      <input type="password"> <!-- Changed to password type -->
    </div>
    <div class="field buttons">
      <!-- Added type="button" here too -->
      <button type="button" class="prev-1 prev">Previous</button>
      <!-- Keep this as submit for final form submission -->
      <button class="submit">Submit</button>
    </div>
  </div>
</form>

Updated JavaScript #

const slidePage = document.querySelector(".slidePage");
const first_nextBtn = document.querySelector(".nextBtn-1");
const first_prevBtn = document.querySelector(".prev-1");

first_nextBtn.addEventListener("click", function() {
  slidePage.style.marginLeft = "-25%";
});

first_prevBtn.addEventListener("click", function() {
  // Fixed the marginLeft value here
  slidePage.style.marginLeft = "0%";
});

Bonus Tip #

I also changed your password inputs to type="password" so the text is hidden—this is a basic security best practice for password fields!

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