Javascript 单击后显示新表单

我正在尝试实现一个三步表单系统。基本上，加载页面时，将显示表单的第一步。完成后，在用户单击“下一步”按钮后，将显示2号表单，依此类推

但是我被JS代码卡住了。我不知道该怎么办

我的逻辑只是将父元素（.step）放在display:none中，在用户单击按钮后，在display:block中执行下一步。你觉得怎么样

（这显然是一个原型，DIV将被替换为）

HTML:

Javascript（ES5/6），而不是jQuery

const btnStep = document.querySelector('.next-step');
const steps   = [].slice.call(document.querySelector('.steps').children);

btnStep.addEventListener('click', () =>
  steps.forEach(step => {
    // if (step.classList.contains('is-active')) {
    //   step.classList.remove('is-active')
    // }
    step.nextElementSibling.classList.add('is-active')

  })
)

---

非常感谢。

我想你应该使用步进计数器。您应该计算js中的步骤，并将它们放入一个名为“numberOfSteps”的变量中，以便始终可以添加更多步骤。然后制作两种方法，一种用于递增，一种用于递减，并相应地更改计数器。然后如果（stepCounter==numberOfSteps），则显示submit按钮

尝试将所有逻辑放在不同的函数中，并使用相应的事件处理程序（单击等）调用它们

---

希望这能让你上路。祝你好运

我不知道第三步之后你想要什么样的行为

但这是我的解决方案，虽然我不确定这正是你想要的

在“x=5”中，只要添加表单完成时的代码，如果是重定向或其他什么

---

它非常简单，但是越简单，调试和实现就越容易。我有点时间，所以我在这里找到了一个简单的解决方案

在按钮上单击调用函数，将活动类添加到第一个元素，因为它将作为起点

<div class="steps">
 <div class=" is-active step1">
  Step 1/3
</div>
<div class="step step2">
  Step 2/3
</div>
<div class="step step3">
 Step 3/3
</div>
</div>

<button type="submit" class="btn next-step" onclick="stepnext()">Next step</button>

---

你的问题是什么？你面临什么问题？你尝试了什么？加载你的代码笔会使它无限刷新页面，请更改它使其生效我的代码笔在家里工作得很好我在代码笔中添加了一个if语句，在divs结束时不继续if

const btnStep = document.querySelector('.next-step');
const steps   = [].slice.call(document.querySelector('.steps').children);

btnStep.addEventListener('click', () =>
  steps.forEach(step => {
    // if (step.classList.contains('is-active')) {
    //   step.classList.remove('is-active')
    // }
    step.nextElementSibling.classList.add('is-active')

  })
)

  var x = 1;

  function ini() {

    if (x == 1) {
      document.querySelector(".step1").classList.toggle("is-active");
      document.querySelector(".step2").classList.toggle("is-active");
      x++;
      console.log(x);
    } else if (x == 2) {
      document.querySelector(".step2").classList.toggle("is-active");

      document.querySelector(".step3").classList.toggle("is-active");
      x++;
      console.log(x);
    } else if (x == 3) {
      document.querySelector(".step3").classList.toggle("is-active");
      document.querySelector(".hello-world").innerHTML = "All done!";
      x = 5; // Add your desired execution after 3/3 steps of the form are completed
    }
  }

<div class="steps">
 <div class=" is-active step1">
  Step 1/3
</div>
<div class="step step2">
  Step 2/3
</div>
<div class="step step3">
 Step 3/3
</div>
</div>

<button type="submit" class="btn next-step" onclick="stepnext()">Next step</button>

 function stepnext() {

  document.getElementsByClassName('is-active')[0].classList.add('step');
  var elem = document.getElementsByClassName('is-active');
  elem[0].nextSibling.nextSibling.classList.add('is-active');
  document.getElementsByClassName('is-active')[0].classList.remove('is-active');


}