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

[Vans]

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

<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>

 

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 = 'Пароли не совпадают!'
        }
    })
})

 

[hypnocolor]

Приветствую.

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

Наскоряк переписал/дополнил как-то так:

var regbutton = document.querySelectorAll('.button a'),
    form = document.querySelector('form'),
    inputs = document.querySelectorAll('input'),
    h3 = document.querySelector('h3'),
    reginfo = document.querySelectorAll('p');

regbutton[0].addEventListener('click', function(e) {
    e.preventDefault();
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
});

regbutton[1].addEventListener('click', function(e) {
    e.preventDefault();
    if (inputs[0].value) {
        if (inputs[1].value && inputs[2].value) {
            if (inputs[1].value == inputs[2].value) {
                    h3.textContent = 'Вы завершили регистрацию!';
                    reginfo[1].textContent = inputs[0].value;
                    reginfo[2].textContent = inputs[1].value;
            } else {
                    h3.textContent = 'Пароли не совпадают!';
            }
        } else {
            h3.textContent = 'Введите пароль в оба текстовых поля';
        }
    } else {
        h3.textContent = 'Введите имя';
    }
});

Продолжайте учить 🙂

[snowjotunn]

Добавлю важный совет, на будущее. Кнопки делать ссылками только в том случае если клик по ним совершает переход на новый url. В остальном случае это должен быть тег button. 🙂

Edited August 5, 2019 by snowjotunn