i have a problem with JS function that doesn't change html class-CodePudding

I'm new with JS and html, So please go easy on me. I made a registration form that contains multiple steps. I have two button in two different form. next form button and back button. next button works perfectly and it changes html id base on what I needed. but the back button which is exactly like previous one doesn't work. Why?

I want that JS functions changes html class.

function backPageFunction() {
  document.querySelector(".containerform1").id = 'containerform1';
  document.querySelector(".containerform2").id = 'containerform2'
  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() {
  // containerform1.id='secActive1';
  document.querySelector(".containerform1").id = 'secActive1';
  document.querySelector(".containerform2").id = 'secActive2';
  // containerform2.id='secActive2';
  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';

};

#secActive1 {
  width: 982px;
  height: 600px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 0 !important;
  pointer-events: none;
  transform: translateX(100%);
  transition: 1s;
}

#secActive2 {
  width: 982px;
  height: 270px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 1 !important;
  transform: translateX(0%);
  transition: 1s;
}

#containerform1 {
  width: 982px;
  height: 600px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 1;
  transition: 1s;
}

#containerform2 {
  width: 982px;
  height: 270px;
  position: relative;
  margin: 40px auto;
  border: 1px solid #cfd8dc;
  background: #eceff1;
  border-radius: 5px;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: 1s;
}

<div >
  <button  id="nextbtnform1" onclick="nextPageFunction()">ثبت اطلاعات و ادامه  </button>
</div>
</fieldset>
</form>
</div>
<div id="containerform2" >
  <form id="Form2" >
    <fieldset id="Form2">
      <legend >مشخصات حرفه‌ای و شغلی</legend>
      <div >
        <div>
          <label>سطح تحصیلات</label>
          <span >*</span>
          <select id="edu"  name="edu" valid-directive="isEmpty">
            <option label="دیپلم و پایینتر" value="number:100" selected="selected">دیپلم و پایینتر</option>
            <option label="فوق دیپلم" value="number:101">فوق دیپلم</option>
            <option label="کارشناسی" value="number:102">کارشناسی</option>
            <option label="کارشناسی ارشد" value="number:103">کارشناسی ارشد</option>
            <option label="دکتری و بالاتر" value="number:104">دکتری و بالاتر</option>
          </select>
        </div>
        <div>
          <label>رشته تحصیلی</label>
          <span >*</span>
          <input id="degree">
        </div>
        <div>
          <label>دانشگاه محل تحصیل</label>
          <span >*</span>
          <input id="college" name="college" valid-directive="isEmpty,isPersianAlphaWithoutNumber,isInAlphabet([2#50])">
        </div>
      </div>
    </fieldset>
    <fieldset >
      <div >
        <button  id="backbtnform2" onclick='backPageFunction()'>بازگشت و ویرایش اطلاعات</button>

CodePudding user response：

Hi so I you want to change classes of elements try this:

1) Change id's to classes in css:

like .secActive1, .secActive2 etc.

2) JS:

function changeClasses(){ 
    document.querySelector(".containerform1").classList.add('secActive1'); 
    document.querySelector(".containerform1").classList.add('secActive2'); 
}

Don't forget to remove them when other button is clicked:

function changeClassesBack(){
   document.querySelector(".containerform1").classList.remove('secActive1');
   document.querySelector(".containerform1").classList.remove('secActive2');
}

Hope it helps