时间戳

首页 > 解决方案 > 试图让下一个和上一个按钮出现在注册表单的不同时间

javascript - 试图让下一个和上一个按钮出现在注册表单的不同时间

问题描述

您好，我正在尝试为我的网站制作注册表单，我正在做下一个和上一个来浏览我的网站，我的下一个和上一个工作良好，但我希望在第一个问题时隐藏上一个按钮和当我回答最后一个问题时显示的注册标志。

这是我的 JS

      var nameRegistration = document.querySelector('.name- 
      registration');
      var emailRegistration = document.querySelector('.email- 
      registration');
      var industriesRegistration = document.querySelector('.industries- 
      registration');
      var birthRegistration = document.querySelector('.birth- 
      registration');
      var passwordRegistration = document.querySelector('.password-registration');

var nextContainer = document.querySelector('#forward');
var backContainer = document.querySelector('#back');
var registerContainer = document.querySelector('#register-btn-container');

  if (nameRegistration.style.display === 'none ') {
    backContainer.style.display = 'block'
} 

  if (passwordRegistration.style.display === 'block') {
    registerContainer.style.display = 'block'
}

标签： javascripthtmlcss

解决方案

您可以通过多种方式实现这一点，例如，让计数器知道您在流程的哪一部分，并在每个“部分”更改时保持递增和递减，并据此采取行动。

checkSection 编辑您需要的选项/字段。

let activeSection = 0;

const checkSection = position => {
//if not in the start, hide start section/button/option
 if(position == 0) {
   document.getElementById('id').style.display = 'none';
   document.getElementById('otherid').style.display = 'block';
}
 else { 
  document.getElementById('id').style.display = 'none';
  document.getElementById('otherid').style.display = 'block';
  } 
}

//and control where you are with listeners to the clicks
document.getElementById('linkmoveup').addEventListener('click',function(e){
   //don't follow link
   e.preventDefault();
   //lets assume this is for the next point, increment position counter
   activeSection++;
   //recheck for what is active
   checkSection(activeSection);
});

推荐阅读