Почему всё работает лишь временно?

Question

[fapchat]

let log = document.querySelector('[href="#LOGIN"]') ;
    let reg = document.querySelector('[href="#REGISTRATION"]') ;
    log.style.display = 'none';
reg.style.display = 'none';
__tabItems.forEach(item => {
item.classList.add('show');
});

меняет элементы хедера во время выполнения программы

Но потом всё возвращается на свои места.
https://codepen.io/fapchat2/pen/bGbMLYZ
Вот, что должно получиться, если пользователь зарегистрировался

Comments

[Никита Кит]

Если честно, вообще ни черта непонятно. Что за ОНО? Клоун из ужастика?
Если пользователь зарегистрировался должен получиться код?
Учись сначала постановке вопроса на русском, а там уже поди и js подтянется

[dollar]

Заголовок вопроса достоин Оскара

[fapchat]

Никита Кит, вот так лучше?

[Никита Кит]

dollar, ага, когда пытаешься в код, но в душе ты философ =)

[Rustam Bainazarov]

Какой дизайн, LOL.
Какая формулировка вопроса, LOL.

Answer 1

[Никита Кит]

Я не знаю какого поведения ты ждёшь, но наверное ты кое-что упустил по базовому поведению форм.
У тебя при сабмите улетает пост на текущий урл, страница перезагружается, состояния скидываются. Перехвати сабмит формы и делай с этим событием что душе угодно
И подтяни матчасть

Comments

[fapchat]

так как же это сделать?

[fapchat]

то есть какой обработчик и тд?

[irishmann]

fapchat, зачем ответ отметили решением, если это не решение и у Вас остались вопросы?

[fapchat]

irishmann, вопросы остались, но это всё рвавно решение

[irishmann]

fapchat, совет "перестать страдать х***й", по вашей логике тоже решение, по которому так же остались вопросы?:)

[irishmann]

fapchat,

document.querySelector('selector_formy_svoj_postav').onsubmit= function (event){
event.preventDefault();//заблокировали действие по умолчанию
//Дальше творим чё хотим и отправляем форму как хотим
};

[fapchat]

irishmann,

forms[0].onclick = function (event){
  event.preventDefault();


  forms[0].addEventListener("submit", function (event) {

   if (password[0].value != confirmPassword[0].value && (password[0].value.length < "6" || confirmPassword[0].value.length < "6"))  {


     error[0].innerHTML = "You must confirm your password and input from 6 to 10 symbols";
     error[0].className = "error active";

     event.preventDefault();
   }else if (password[0].value != confirmPassword[0].value) {

     error[0].innerHTML = "You must confirm your password";
     error[0].className = "error active";

     event.preventDefault();
   } else if (password[0].value.length < "6" || confirmPassword[0].value.length < "6") {

     error[0].innerHTML = "You must input from 6 to 10 symbols";
     error[0].className = "error active";

     event.preventDefault();
   }
  }, false);

  let log = document.querySelector('[href="#LOGIN"]') ;
  let reg = document.querySelector('[href="#REGISTRATION"]') ;

  log.style.display = 'none';
  reg.style.display = 'none';
  __tabItems.forEach(item => {
  item.classList.add('show');
  });
  let logouts = document.querySelectorAll('[caption="logout"]');
  logouts.forEach(item => {
  item.classList.add('show');
  });
  forms[0].submit();
 };

Ничего так как нужно не работает

[Никита Кит]

fapchat, лучше используй onsubmit. target события onsubmit - сама форма. Из неё легче получить доступ к данным формы, чем из click event. Его target будет кнопка отправки формы, по своему содержанию не имеющая доступа к данным формы.
Кода я тебе ни строчки, конечно же, не напишу. Всё сам гугли и пробуй. Полезнее всё-таки объяснить чем сделать за тебя

[fapchat]

Никита Кит, мне другу нужно сайтик сделать, так я бы просто читал бы книги всякие и тд

[Никита Кит]

Ничего так как нужно не работает

Да тебе бы в QA с такой постановкой проблем)

[Никита Кит]

fapchat, ну вообщем взглянул я на код...
1) не надо forms[0], раскидай их по разным переменным. Через коллекцию имеет смысл если ты циклично даёшь им какую-то общую функциональность.
2) event.preventDefault() вызови один раз и сверху. Или return false в самом конце колбэка. Ты его затусил куда-то в середину и ещё и в блок условий и ещё и несколько раз, что-то мне кажется из-за этого он и не превентится)

[fapchat]

Никита Кит, даже мне сразу было понятно, что если вызвать preventDefault 1 раз и сверху - ничего хорошего из этого не выйдет

[Никита Кит]

fapchat, ну значит плохо понял, потому что event.preventDefault() вызывается один раз и сверху