Sign in to follow this  
Vans

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

Recommended Posts

Здравствуйте!
Только начал учить 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 = 'Пароли не совпадают!'
        }
    })
})

 

Share this post


Link to post
Share on other sites

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

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

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

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 = 'Введите имя';
    }
});

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

Share this post


Link to post
Share on other sites

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

Edited by snowjotunn

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.