На сколько это правильно? (DOM)

11 мая 2021, 18:00

Только начал учить Js, сейчас прохожу блок по DOM. Написал абстрактную регистрацию пользователя с проверкой на совпадение паролей, на сколько правильно я это сделал?

var regbutton = document.querySelectorAll('.button') 
var form = document.querySelector('form') 
var inputs = document.querySelectorAll('input') 
var h3 = document.querySelector('h3') 
var reginfo = document.querySelectorAll('p') 
 
regbutton[0].addEventListener('click', function(){ 
    if(form.style.display === 'none'){ 
        form.style.display = 'block' 
    } else { 
        form.style.display = 'none' 
    } 
 
    regbutton[1].addEventListener('click', function(){ 
        if(inputs[1].value == inputs[2].value){ 
            h3.textContent = 'Вы завершили регистрацию!' 
            reginfo[1].textContent = inputs[0].value 
            reginfo[2].textContent = inputs[1].value 
        } else { 
            h3.textContent = 'Пароли не совпадают!' 
        } 
    }) 
})

<div class="main"> 
    <h2>Форма регистрации</h2> 
    <p>Пройдите регистрацию.</p> 
    <div class="button"> 
        <a href="#" class="a-reg">Регистрация</a> 
    </div> 
 
    <form action="#"> 
        <label for="">Имя:</label><br> 
        <input type="text"><br> 
        <label for="" class="password">Пароль:</label><br> 
        <input type="text"><br> 
        <label for="" class="re-password">Повторите пароль:</label><br> 
        <input type="text"> 
        <div class="button"> 
            <a href="#" class="a-reg">Регистрация</a> 
        </div> 
        <br> 
        <h3></h3> 
        <p></p> 
        <p></p> 
      </form> 
  </div>

Answer 1

    var regbutton = document.querySelectorAll('.button'),
        form = document.querySelector('form'),
        inputs = document.querySelectorAll('input'),
        h3 = document.querySelector('h3'),
        reginfo = document.querySelectorAll('p');
    form.style.display = 'none';    /** нужно чтобы форма была отключена при загрузке 
    сайта, лучше начальные стили задавать с помощью CSS */
    regbutton[0].addEventListener('click', function () {    
      form.style.display = 'block';    
      regbutton[0].style.display = 'none';
    });    // здесь вам if else не нужны, данной функцией имеет смысл воспользоваться 
    только раз

    regbutton[1].addEventListener('click', function () {
      if(inputs[1].value === inputs[2].value && inputs[0].value !== '' && 
         inputs[1].value !== '' && inputs[2].value !== '') {
    /** в условии вам лучше проверят на строгое равенство ===,
    так как при вводе пароля в формате "0" == 0 у вас выйдет true. И вам нужно 
    проверить не пустые ли у вас строки, тоже вернет true.
    Нужно проверить не пустое ли поле с именем пользователя */

        h3.textContent = 'Спасибо ' + inputs[0].value.charAt(0).toUpperCase() + 
        inputs[0].value.slice(1) + '. Вы успешно завершили регистрацию!';
        // здесь я немного изменил ваш код, думаю так будет красивее.

      } else {
        if (inputs[0].value === '' && inputs[1].value !== '' && inputs[2].value !== '') 
        { 
          h3.textContent = 'Введите имя пользователя!';
        } else if (inputs[0].value !== '' && inputs[1].value === '' && 
          inputs[2].value === '') {
           h3.textContent = 'Введите пароль!';
        } else {
          h3.textContent = 'Пароли не совпадают!';
        }  
        // здесь добавил несколько простых условий проверки при заполнении полей формы
      }
    });
    // после каждой инструкции нужно ставить ( ; )