JavaScript обновление значения объекта при входе-событии - PullRequest
Новая
       82

JavaScript обновление значения объекта при входе-событии

0 голосов
/ 14 июля 2020

Пока следующий код не обновляет значение email.value.length константы errorMessages. Идея состоит в том, чтобы отобразить оставшееся количество символов, чтобы вернуть истину;

Заранее спасибо; 

const email = document.getElementById("mce-EMAIL");

const errorMessages = {
  typeMismatch: 'I am expecting an e-mail address!',
  valueMissing: 'You need to enter an e-mail address',
  tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
};

function displayErrorMessage(errorMessage) {
  return errorMessages[errorMessage];
}

const typeCheck = (onValue) => {
  let typeMismatch, valueMissing, tooShort;
  
  typeMismatch = (onValue.validity.typeMismatch) ? displayErrorMessage('typeMismatch') : true;
  valueMissing = (onValue.validity.valueMissing) ? displayErrorMessage('valueMissing') : true;
  tooShort = (onValue.validity.tooShort) ? displayErrorMessage('tooShort') : true;
  
  return false;
}

email.addEventListener('input', (event) => {
  typeCheck(event.explicitOriginalTarget);
});

1 Ответ

0 голосов
/ 14 июля 2020

Было бы легче узнать, чего вы ожидаете, если вы предоставите свой html. ; o)

Как это выглядит: вы изначально определили свой const errorMessages в своей функции. Это означает, что он никогда не обновляет значения в нем.

Поместите константу в функцию displayErrorMessage(), и она будет работать. 

function displayErrorMessage(errorMessage) {
    const errorMessages = {
        typeMismatch: 'I am expecting an e-mail address!',
        valueMissing: 'You need to enter an e-mail address',
        tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
    };
    return errorMessages[errorMessage];
}

Вот рабочий пример: 

const email = document.getElementById("mce-EMAIL");
const output = document.getElementById("output");


function displayErrorMessage(errorMessage) {

const errorMessages = {
  typeMismatch: 'I am expecting an e-mail address!',
  valueMissing: 'You need to enter an e-mail address',
  tooShort: `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }`
};

output.innerHTML = errorMessages[errorMessage];

  return errorMessages[errorMessage];
}

const typeCheck = (onValue) => {
  let typeMismatch, valueMissing, tooShort;
  
  typeMismatch = (onValue.validity.typeMismatch) ? displayErrorMessage('typeMismatch') : true;
  valueMissing = (onValue.validity.valueMissing) ? displayErrorMessage('valueMissing') : true;
  tooShort = (onValue.validity.tooShort) ? displayErrorMessage('tooShort') : true;
  
  return false;
}

email.addEventListener('input', (event) => {
  typeCheck(event.explicitOriginalTarget);
});
<div class="container">
  <input type="email" id="mce-EMAIL" minlength="10">
</div>
<div id="output"></div>
...