Не получается записать значение input в переменную

150
11 октября 2021, 09:30

Не могу получить значение из input class="#user-name". В консоли значение "".

<form class="modal-form" action="#" method="post">
      <label class="modal-label" for="user-email">E-mail</label>
      <input class="modal-input" id="user-email" type="email" name="email" required>
      <label class="modal-label" for="user-name">Никнейм</label>
      <input class="modal-input" id="user-name" type="text" name="name" required>
      <label class="modal-label" for="user-name">Пароль</label>
      <input class="modal-input modal-input--password" id="user-password" type="password" name="password" required>
      <p class="modal-description">Пароль должен содержать:</p>
      <ul class="modal-list">
        <li class="modal-list--item">от 6 до 32 символов</li>
        <li class="modal-list--item">цифру</li>
        <li class="modal-list--item">заглавную и строчкую буквы</li>
      </ul>
      <p class="modal-caution">Пароль не должен совпадать с Никнеймом</p>
      <label class="modal-label" for="user-name">Пароль еще раз</label>
      <input class="modal-input modal-input--password" id="user-password--repeat" type="password" name="password" required>
      <p class="modal-caution">Введённые пароли не совпадают</p>
      <div class="modal-checkbox">
        <input class="modal-checkbox modal-checkbox__input" type="checkbox" id="ok" required>
        <label class="modal-checkbox modal-checkbox__label" for="ok">Я принимаю условия
          <a class="modal-checkbox modal-checkbox__link" href="#">Пользовательского соглашения</a>
        </label>
      </div>
      <button class="modal-button button" type="submit">Зарегистрироваться</button>
    </form>
'use strict';
(function () {
  var MAX_NIKAME_LENGTH = 40;
  var MIN_NIKAME_LENGTH = 3;
  var nikName = document.querySelector('#user-name');
  var nikNameValue = nikName.value;
  var validateNikName = function () {
    var errorMessage;
    var legalSimbol = /^[A-Za-z0-9_;]+$/;
    if (nikNameValue.charAt(0) !== /^[A-Za-z]+$/) {
      errorMessage = 'Никнейм может начинаться только с буквы';
    } else if (nikNameValue.length < MIN_NIKAME_LENGTH) {
      errorMessage = 'Никнейм не может быть меньше чем 3 символа';
    } else if (nikNameValue.length > MAX_NIKAME_LENGTH) {
      errorMessage = 'Никнейм не может быть больше чем 40 символов';
    } else if (nikNameValue.match !== legalSimbol) {
      errorMessage = 'Никнейм может содержать только латинские буквы и символы "_" и ";"';
    }
    if (errorMessage) {
      nikName.setCustomValidity(errorMessage);
      nikName.style.border = '1px solid #9F2B11';
    } else {
      nikName.style.border = '1px solid #DDDDDD';
      nikName.setCustomValidity('');
    }
  };  
  nikName.addEventListener('input', validateNikName);
})();
Answer 1

Если хотите детальней узнать про область видимости - ошибку из за которой не работал ваш код.

Почитайте статью, ссылку оставлю ниже:

https://getinstance.info/articles/javascript/variables-scope-in-javascript/

И эту статью, в которой рассказивают почему нужно использовать let и const вместо var. https://habr.com/ru/company/ruvds/blog/420359/